在React中有非常多的Hooks让我带你深刻了解

在React中有非常多的Hooks，其中useEffect使用非常频繁，针对一些具有副作用的函数进行包裹处理，使用Hook的收益有：增强可复用性、使函数组件有状态

数据获取、订阅或手动修改DOM都属于副作用(side effects)。

effect会在React的每次render之后执行，如果是有一些需要同步的副作用代码，则可以借助useLayoutEffect来包裹，它的用法和useEffect类似

useEffect有两个参数，第一个传递一个函数，第二个参数是作为effect是否执行第一个参数中的函数是否执行的标准，换句话说，第二个参数数组中的变量是否变化来决定函数是否执行，函数是否执行依赖于第二个参数的值是否变化。在React中的比较是一个shallow equal(浅比较)，对于深层次的对象嵌套，无法准确判断是否发生变化。

useEffect借助了JS的闭包机制，可以说第一个参数就是一个闭包函数，它处在函数组件的作用域中，同时可以访问其中的局部变量和函数。

多个useEffect串联，根据是否执行函数(依赖项值是否变化)，依次挂载到执行链上

在类组件中，有生命周期的概念，在一些讲react hooks的文章中常常会看到如何借助useEffect来模拟 componentDidmount和 componentUnmount的例子，其第二个参数是一个空数组[]，这样effect在组件挂载时候执行一次，卸载的时候执行一下return的函数。也同样是闭包的关系，通过return一个函数，来实现闭包以及在React下次运行effect之前执行该return的函数，用于清除副作用。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!