梳理一下hooks和类组件生命周期的联系和实现

在React函数式组件中，可以使用useEffect钩子函数来模拟类组件的生命周期。useEffect允许我们在每次渲染后执行副作用操作，并且可以在组件挂载、更新和卸载时执行不同的操作。

下面是如何使用useEffect模拟类组件中的生命周期：

1. 模拟componentDidMount：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在组件挂载时执行
  }, []); // 空数组表示该effect只会在组件挂载时执行一次
  // ...
}

2. 模拟componentDidUpdate:

import { useEffect, useRef } from 'react';

function MyComponent(props) {
  const prevPropsRef = useRef(props);

  useEffect(() => {
    const prevProps = prevPropsRef.current;
    // 在组件更新时执行
    return () => {
      // 在下一次更新之前执行
      prevPropsRef.current = props;
    };
  });

  // ...
}

3. 模拟componentWillUnmount：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    return () => {
      // 在组件卸载时执行
    };
  }, []);
  // ...
}

这些示例演示了如何使用useEffect钩子函数模拟类组件的生命周期。需要注意的是，useEffect的第二个参数（依赖项数组）可以控制副作用的触发。将其留空表示不依赖任何值，只在组件挂载和卸载时执行；传递一个数组表示该effect仅在所列出的值发生更改时才会执行；不传递第二个参数将导致effect在每次组件渲染时都执行。

补充一个

4. 模拟componentShouldUpdate

import React from 'react';

function MyComponent(props) {
  // ...
}

export default React.memo(MyComponent);

在这个示例中，我们使用了 React.memo 来包装 MyComponent 组件。这样，当 MyComponent 的 props 没有发生变化时，React 就会直接使用缓存的渲染结果，从而避免不必要的重新渲染。

最后这个是结合了diff算法的第二个优化，同一类型的组件没有变化时，不进行diff判断，节省时间。