Effect Hook

可以把useEffect Hook看做componentDidMount,componentDidUpdate和componentWillUnmount三个函数的组合

无需清除的effect

在React更新DOM之后运行一些额外的代码  这个过程useEffect做了什么？

通过使用这个Hook，你可以告诉React组件需要在渲染后执行某些操作。React会保存传递的函数，并且在执行DOM更新之后调用它。

需要清除的effect

effect函数返回一个函数，React将会在执行清除操作时调用

这是effect可选的清除机制。每个effect都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。

React何时清除effect? React会在组件卸载的时候执行清除操作。effect在每次渲染的时候都会执行。这就是为什么React会在执行当前effect之前对上一个effect进行清除

跳过Effect进行性能优化

class组件中，通过componentDidUpdate中添加对prevProps或prevState的比较逻辑解决

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

如果某些特定值在两次重渲染之间没有发生变化，可以通知React跳过对effect的调用，只要传递数组作为useEffect的第二个可选参数即可

document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。