React 组件生命周期：剖析组件生命周期各个阶段的奥妙

2023-11-25 13:47:44

揭秘 React 组件生命周期：管理组件行为的关键

前言

在 React 应用中，组件是构建 UI 和处理用户交互的核心元素。为了让这些组件发挥最佳性能，React 引入了组件生命周期方法，允许开发人员在组件创建、挂载、更新和销毁的不同阶段执行特定的操作。深入理解这些生命周期方法至关重要，可以让我们更好地控制和管理组件的行为。

1. 初始化阶段

getInitialState：

初始化组件的 state，仅在首次装载前调用一次。
state 是一个包含组件内部状态的对象，可以在组件中使用。

getDefaultProps：

定义组件的默认 props，在组件实例化时调用。
defaultProps 包含组件的默认属性值，在没有指定时使用。

2. 挂载阶段

componentWillMount：

在组件挂载到 DOM 之前调用。
执行初始化操作，如获取数据或设置 state。

componentDidMount：

在组件挂载到 DOM 之后调用。
执行与 DOM 相关的操作，如操作 DOM 节点或添加事件监听器。

3. 更新阶段

shouldComponentUpdate：

在组件接收到新 props 或 state 时调用。
决定是否更新组件，返回 true 则更新，否则不更新。

componentWillUpdate：

在组件更新之前调用。
执行更新前操作，如更新 state。

componentDidUpdate：

在组件更新之后调用。
执行更新后操作，如更新 DOM 节点或添加事件监听器。

4. 卸载阶段

componentWillUnmount：

在组件从 DOM 中卸载之前调用。
执行卸载前操作，如移除事件监听器或清理资源。

代码示例

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

  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }

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

在示例中，MyComponent 组件每秒更新一次 state，每次更新后都会重新渲染。