useEffect的4种情况

125 阅读1分钟

useEffect使用时有以下4种情况
useEffect数据挂载数据更新时候使用
替代之前的componenetDidMount(){}和componentDidUpdate(){}

1、不传递
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行

2、传递空数组
useEffect(()=>{ console.log(props) },[]) //仅在挂载和卸载的时候执行

3、传递一个值
useEffect(()=>{ console.log(count) },[count]) //count更新时执行

4、传递多个
const Asynchronous : React.FC=({number})=>{ const [number2,setNumber2] = useState(number); useEffect(()=>{ console.log(number) setNumber2(number) },[number,setNumber2]) //监听props对象number的更改 //setNumber2是useState返回的setter,所以不会在每次渲染时重新创建它,因此effect只会运行一次

5、传递props的对象 传递的useState返回的setter
6、return 方法

const timer = setInterval(() => { setCount(count + 1) }, 1000) // useEffect方法的第一个参数是一个函数,函数可以return一个方法,这个方法就是在组件销毁的时候会被调用 useEffect(() => { return () => { clearInterval(timer) } }, [])

一个组件里面也可以写两个或者多个useEffect
因为他替代componentDidMount 和componentDidUpdate吗?

useMemo使用方法也是相同的
它替代了shouldComponentUpdate

参考文章:
blog.csdn.net/IT_bar/arti…
www.jianshu.com/p/f423b1401…