useEffect用于处理组件中的effect,通常用于请求数据,事件处理,订阅等相关操作。

useEffect的第二个参数:

1.当useEffect没有第二个参数时

vue转react useEffect的详细_数据

vue转react useEffect的详细_生命周期_02

通过这个例子可以看到useEffect没有第二个参数时不停的在调用

2.当useEffect第二个参数为空数组时

vue转react useEffect的详细_前端_03

vue转react useEffect的详细_商业_04

通过这个例子可以看出来useEffect在调用一次后就不再调用

3.当useEffect第二个参数为变量时

vue转react useEffect的详细_生命周期_05

通过这个例子可以看出来useEffect在每次count发生变化时调用

useEffect的使用:

vue转react useEffect的详细_前端_06

上面的例子可以看出来使用useEffect和和class component使用生命周期函数时的区别,使用useEffect将每次count变化的数据都打印出来,而使用componentDidUpdate打印了最后一个数据很多次,因为class component里面的state随着render是发生变化的,而useEffect里面的所有东西都是每次render独立的。

useEffect清除:

vue转react useEffect的详细_数据_07

useEffect通过return进行一些清除。

vue转react useEffect的详细_数据_08

例如官方文档里面的例子,当props.friend.id发生变化时,可以进行清除工作


作者:亦晓寒

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。