React hooks 学习笔记 - useEffect

概念理解：什么是Effect

Pure function（纯函数）

• 给一个 function 相同的参数，永远会返回相同的值，并且没有副作用；这个概念拿到 React 中，就是给一个 Pure component 相同的 props, 永远渲染出相同的视图，并且没有其他的副作用；纯组件的好处是，容易监测数据变化、容易测试、提高渲染性能等；
• 副作用（Side Effect）是指一个 function 做了和本身运算返回值无关的事，比如：修改了全局变量、修改了传入的参数、甚至是 console.log()，和ajax 操作，修改 dom 都是算作副作用的；

Effect（副作用）
对于数据抓取，注册监听事件，修改 DOM 元素，发ajax请求…的操作都属于副作用，因为我们渲染出来的页面是静态的，任何在之后的操作都会对它产生影响，所以才称之为副作用。而 useEffect 则是专门用来编写副作用代码的，这也是 React 的核心所在。

使用useEffect，可以直接在函数组件内处理生命周期事件。 根据React class 的生命周期函数，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

componentDidMount：
在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
（相当于vue的mounted ）

componentDidUpdate：
在组件完成更新后立即调用。在初始化时不会被调用。
（大致相当于vue的beforeUpdate ）

componentWillUnmount：
在组件从 DOM 中移除之前立刻被调用。
（相当于vue的beforeDestroy）

useEffect 相关特性

useEffect 做了什么？
通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。

为什么在组件内部调用 useEffect？
将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

如果我们需要在每次执行后清除副作用（防止内存泄露）
在 effect 中返回一个函数： 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。
React 何时清除 effect：React 会在组件卸载的时候执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。
例如：

useEffect(() => {
       
function handleStatusChange(status) {
         
setIsOnline(status.isOnline