React 中挂载阶段 (Mounting) 的生命周期方法有哪些？

推荐答案

在 React 的挂载阶段（Mounting），主要的生命周期方法包括：

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

本题详细解读

1. constructor()

constructor() 是 React 组件的构造函数，通常用于初始化组件的状态（state）和绑定事件处理函数。它在组件挂载之前被调用。

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

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

2. static getDerivedStateFromProps()

static getDerivedStateFromProps() 是一个静态方法，在组件挂载和更新时都会被调用。它接收新的 props 和当前的 state 作为参数，并返回一个对象来更新 state，或者返回 null 表示不需要更新 state。

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null;
  }

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

3. render()

render() 是 React 组件中最重要的生命周期方法之一，它负责返回组件的 JSX 结构。render() 方法在组件挂载和更新时都会被调用。

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

4. componentDidMount()

componentDidMount() 在组件挂载完成后立即调用。通常在这个方法中进行一些初始化操作，比如发起网络请求、设置定时器、订阅事件等。

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  componentDidMount() {
    // 发起网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

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

这些生命周期方法在 React 组件的挂载阶段起着关键作用，理解它们的调用顺序和使用场景对于编写高效的 React 应用至关重要。