⚫ React Hooks 精进 5 - 函数组件的生命周期

忘记 Class 组件的生命周期

Class 组件和函数组件是两种实现 React 应用的方式，需要忘记 Class 组件的生命周期概念。

React 的本质：从 Model 到 View 的映射。

改变组件状态的场景：

• 用户操作
• 请求返回

在函数组件要思考的是当某个状态发生改变时要做什么，而不是在某个生命周期内要做什么。

重新思考组件的生命周期

构造函数：constructor

在所有其他代码执行前的一次性初始化工作。

函数组件基本上没有统一的初始化需要，因为 Hooks 自己会负责自己的初始化，然后可以使用 useRef 来标记是否执行过（useRef 的数据在组件渲染过程中不被重置）。

三种常用生命周期方法

componentDidMount，componentWillUnmount 和 componentDidUpdate 这几个生命周期方法都可以统一到 useEffect 这个 Hook 上（触发一个副作用，在每次 render 之后执行）。

useEffect(() => {
  console.log("componentDidMount + componentDidUpdat");

  return () => {
    console.log("componentWillUnmount");
  };
}, [deps]);

useEffect 接收一个 callback 参数（deps），可以返回一个用于清理资源的函数。

区别：

1. useEffect(callback)接收的这个 callback 函数只在依赖项（deps）改变时执行，而 componentDidUpdate 在 state 发生改变时一定会执行，此时需要手动去判断某个状态是否发生改变。

2. callback 返回的清理函数在下一次依赖项发生变化以及组件销毁之前执行，而 componentWillUnmount 只在组件销毁时执行。

   PS：每次 Effect 执行之前都会执行用于清理上一次 Effect 的执行结果。

实际项目使用

1. 类组件和函数组件可以相互引用。
2. Hooks 很容易转换成高阶组件，并供类组件使用。

思考

如果想在函数组件内实现严格的 componentWillUnmount 即只在销毁时执行，应该如何实现。

我的思路：就是使用空依赖项的 useEffect（✅ 正确）