React 新旧生命周期对比，有什么区别？

2024-02-21 03:24:46

React 是一个流行的 JavaScript 库，用于构建用户界面。React 生命周期是 React 组件在生命周期中经历的不同阶段，从组件的创建到组件的销毁。

React 生命周期在第16版开始发生了重大变化。新生命周期与旧生命周期在设计和实现上有什么不同？本文将详细比较 React 旧生命周期（基于 class 组件实现）和新生命周期（基于函数组件和 Hooks 实现），并介绍新旧生命周期的具体变化和用法。

React 旧生命周期

React 旧生命周期基于 class 组件实现。class 组件的生命周期主要包括以下几个阶段：

constructor()：组件的构造函数，用于初始化组件的状态和属性。
componentWillMount()：组件即将挂载到 DOM 时调用。
componentDidMount()：组件已经挂载到 DOM 时调用。
componentWillReceiveProps()：组件即将收到新的属性时调用。
shouldComponentUpdate()：组件是否需要更新时调用。
componentWillUpdate()：组件即将更新时调用。
componentDidUpdate()：组件已经更新时调用。
componentWillUnmount()：组件即将卸载时调用。

React 新生命周期

React 新生命周期基于函数组件和 Hooks 实现。函数组件的生命周期主要包括以下几个阶段：

useEffect()：组件挂载后和更新后都会调用。
useLayoutEffect()：组件挂载后和更新后都会调用，但会在浏览器重新渲染之前调用。
useState()：用于管理组件的状态。
useContext()：用于访问组件的上下文。
useReducer()：用于管理组件的状态，类似于 useState()，但更适合复杂的状态管理。
useCallback()：用于缓存一个函数，以避免函数在组件每次重新渲染时重新创建。
useMemo()：用于缓存一个值，以避免值在组件每次重新渲染时重新计算。

React 新旧生命周期对比

旧生命周期	新生命周期
`constructor()`	不再使用
`componentWillMount()`	`useEffect()`（在组件挂载后首次调用）
`componentDidMount()`	`useEffect()`（在组件挂载后每次更新后调用）
`componentWillReceiveProps()`	`useEffect()`（在组件收到新的属性后调用）
`shouldComponentUpdate()`	不再使用
`componentWillUpdate()`	`useEffect()`（在组件即将更新时调用）
`componentDidUpdate()`	`useEffect()`（在组件已经更新时调用）
`componentWillUnmount()`	`useEffect()`（在组件即将卸载时调用）

React 新旧生命周期用法

旧生命周期用法

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentWillMount() {
    console.log('组件即将挂载');
  }

  componentDidMount() {
    console.log('组件已经挂载');
  }

  componentWillReceiveProps(nextProps) {
    console.log('组件即将收到新的属性', nextProps);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.state.count !== nextState.count;
  }

  componentWillUpdate(nextProps, nextState) {
    console.log('组件即将更新', nextProps, nextState);
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件已经更新', prevProps, prevState);
  }

  componentWillUnmount() {
    console.log('组件即将卸载');
  }

  render() {
    return (
      <div>
        <h1>计数：{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>增加计数</button>
      </div>
    );
  }
}

新生命周期用法

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('组件挂载后首次调用');
  }, []);

  useEffect(() => {
    console.log('组件挂载后每次更新后调用');
  });

  useEffect(() => {
    console.log('组件收到新的属性后调用');
  }, [props]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>计数：{count}</h1>
      <button onClick={handleClick}>增加计数</button>
    </div>
  );
}