react-useEffect

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

useEffect可以实现class的三个生命周期： componentDidMount、componentDidUpdate、componentWillUnmount

js const [index,setIndex] = useState(0); useEffect(() =>{ setIndex(1); console.log(index); })

像这样第二个参数可以不写么？实现了哪个生命周期？componentWillUnmount怎么实现？

• 这种情况实现了两个生命周期，一个是载入后componentDidMount，一个是componentDidUpdate； 因为只要useEffect有执行回调函数，回调的代码就是在载入后componentDidMount执行；

• 而不写第二个参数，则意味着，页面上任何数据改变都将执行useEffect回调函数。所以setIndex(1)，执行后则要再执行一次，依次会一直执行，就会不停调用导致页面崩溃。

• 要用return返回一个回调函数的方法去实现即将卸载的生命周期钩子，比如可以清除定时器之类的，可以卸载返回的回调函数内，就可以实现在卸载钱清除定时器的作用：

js const timer = setInterval(() => {console.log(123)}, 2000); useEffect(() => { return () => { clearInterval(timer); } })

除此之外常用的还有传入空数组[]，一个值的[number]

• 传入空数组，则useEffect只执行一次，经常用来去获取一些初始值，设置一些初始状态。 js const [index,setIndex] = useState(0); useEffect(() =>{ setIndex(1); console.log(index); },[])

• 传入[number],当number改变的时候执行，可执行多次。 js const [index,setIndex] = useState(0); const [number,setNumber] = useState(false); useEffect(() =>{ setIndex(1); console.log(index); },[])

• 一个组件中，useEffect可以写多个。