React中的useEffect四种用法分享

什么是 useEffect ?

官方解释： useEffect 是一个 React Hook，它允许你将组件与外部系统同步。

什么意思？个人理解就是它能根据不同的依赖值或者返回值，在不同的时机进行执行。

我们先来说说第一种用法

1 ： useEffect 中触发更新

示例1 ：当我们在组件创建的过程，自动执行某些操作的时候，那我们可以在函数式组件中这样

错误示例

import { useEffect } from \’react\’
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
initData()
})
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}

如果你这种用 useEffect 你会发现什么问题？

当我们组件渲染完成去执行 useEffect 调用 initData 函数函数通过 setCount 设置值触发更新，一旦更新 useEffect 又会在渲染的最后执行，这样就照成了死循环

所以你应该这样写 ,传入 useEffect 第二个参数空数组，代表组件渲染过程中只执行一次

正确示例

import { useEffect } from \’react\’
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
initData()
}, [])
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}

2 ：用法2 重复的 useEffect

示例2 ：当我们在组件渲染的过程中，如果你写了多个useEffect 它会怎么做？

import { useEffect, useState } from \’react\’;
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(\’111\’);
})
useEffect(() => {
console.log(\’222\’);
})
return (<div> {count} </div>)
}
export default Effect

想当然，它不会覆盖前面的 useEffect ，会根据你的编写顺序进行收集，然后循环执行(当然这只是我的猜测，暂时还没看react源码)

3 ：依赖值触发回调

当你想去依赖某些变量的时候去触发回调函数，你可以这样。

import { useEffect, useState } from \’react\’;
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log(\’count发生了变化最新值为\’ + count);
}, [count])
return (<div>
<div>
{count}
</div>
<button onClick={() => setCount(count + 1)}>加1</button>
</div>)
}
export default Effect

当你的第二个参数是数组，并且是依赖项，组件初次渲染也会执行，这是为什么呢？

解答：如果从 react useState Hook 来说，也就是 react 将你传入的默认值给你重新赋值了，所以发生了变化，因此 useEffect 发生了更新

4 ：useEffect 的返回值

当useEffect 传入的回调函数有返回值时并且为一个函数的时候，它会怎么做？

import { useEffect, useState } from \’react\’;
const Room = () => {
useEffect(() => {
console.log(\”子组件渲染完成\”)
return () => {
console.log(\”子组件useeffect 回调函数执行\”)
}
}, [])
return (<div>
这是我的房间，大家一起来玩呀
</div>)
}
function Effect() {
const [show, setShow] = useState(true)
return (<div>
<div>
{show && <Room></Room>}
</div>
<button onClick={() => setShow(!show)}>加1</button>
</div>)
}
export default Effect