ReactJS 生命周期方法在 Mounting 中的顺序

在 React 中，组件有一个生命周期，可以让开发者在特定的时间来操作组件。这个生命周期被划分为 Mounting、Updating、Unmounting 三个阶段。那么在 Mounting 阶段中，ReactJS 生命周期方法的顺序是怎样的呢？

生命周期方法列表

在 Mounting 阶段中，ReactJS 生命周期方法的顺序如下：

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

生命周期方法详解

constructor()

constructor() 方法是组件的构造函数，它在组件初始化时被调用。在这个方法中，你可以初始化状态（state）和属性（props），也可以定义一些事件处理函数。

constructor(props) {
  super(props);
  // 初始化状态
  this.state = {
    count: 0
  };
  // 绑定事件处理函数
  this.handleClick = this.handleClick.bind(this);
}

getDerivedStateFromProps()

getDerivedStateFromProps() 方法在组件的 props 或 state 发生变化时被调用。这个方法被调用时，它会将新的 state 作为参数传入，你需要返回一个对象，React 将会合并这个对象到组件状态中。

static getDerivedStateFromProps(props, state) {
  if (props.count !== state.count) {
    return {
      count: props.count
    };
  }
  return null;
}

render()

render() 方法是组件渲染的核心函数，它会根据当前的组件状态和属性返回一个组件树。这个方法应该是 纯函数，就是说它只依赖于组件的属性和状态，不会去修改它们。

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

componentDidMount()

componentDidMount() 方法在组件挂载后被调用。这个方法可以用来操作 DOM 或者发起异步请求等等。

componentDidMount() {
  console.log('Component did mount');
}

总结

ReactJS 生命周期方法在 Mounting 阶段中的顺序为：

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

在这个过程中，我们可以通过这些方法来操作组件的状态、属性和 DOM。所以，在编写 React 组件时，了解这个生命周期方法的执行顺序是非常有必要的。