探究 React 生命周期：揭开 View 更新的秘密

2023-11-09 15:18:34

什么是React生命周期？

React组件有三个主要阶段：挂载（Mounting）、更新（Updating）以及卸载（Unmounting）。每个阶段都有相应的钩子函数，这些钩子函数为开发者提供了在不同阶段执行特定操作的机会。

挂载阶段

当一个React组件首次插入DOM时，它会经历挂载阶段。在这个阶段内，主要发生的工作有初始化状态、设置属性以及最终渲染组件到页面上。

代码示例：

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

  componentDidMount() {
    // 组件挂载后执行的代码，如加载数据等。
    console.log('Component did mount');
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

更新阶段

更新阶段发生在用户交互或状态改变时。React会重新计算组件的状态，如果检测到变化，则触发渲染。

代码示例：

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

  componentDidUpdate() {
    // 组件更新后执行的代码。
    console.log('Component did update');
  }

  handleClick = () => {
    this.setState(prevState => ({count: prevState.count + 1}));
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.handleClick}>Increase Count</button>
      </div>
    );
  }
}

卸载阶段

组件从DOM中移除时，会经历卸载阶段。在这个过程中，可以清理之前创建的副作用，比如清除定时器或取消网络请求。

代码示例：

class App extends React.Component {
  componentWillUnmount() {
    // 组件卸载前执行的代码。
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

提高性能：优化生命周期钩子

在组件更新时，避免不必要的重新渲染是一个常见的挑战。React提供了一些方法来实现这一点。

使用PureComponent或memo

通过继承自React.PureComponent或使用React.memo，可以自动跳过未改变属性和状态的渲染。

代码示例：

import React, { memo } from 'react';

const App = memo((props) => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
});

export default App;

监听组件状态变化

有时需要根据特定的状态更改执行一些操作。可以使用getDerivedStateFromProps或useEffect钩子来监听这些变化。

代码示例：

import React, { useEffect } from 'react';

function App(props) {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    // 监听状态改变并执行操作。
    console.log('Count changed', count);
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

export default App;