React中的生命周期详解

React中的生命周期详解

React组件的多种生命周期使得在组件被创建、更新、销毁时可以进行一些特殊的操作，例如数据的初始化，DOM的操作，事件的绑定等。了解React组件的生命周期对于我们编写高质量的React组件非常重要。以下为React组件生命周期的各个阶段和对应的方法。

挂载阶段

挂载阶段是组件被创建并插入到DOM中的阶段。该阶段包含以下三种生命周期方法：

constructor

只会被调用一次，在组件被创建时调用，通常用于初始化组件的状态和绑定事件处理函数。

例如：

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}>Click me!</button>
      </div>
    );
  }
}

render

在组件挂载前调用，用于生成组件对应的DOM结构。返回的结构将会被React渲染到页面上。

例如：

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

componentDidMount

在组件挂载后调用，通常用于进行一些数据的加载和DOM的操作，例如事件的绑定等。

例如：

class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  handleScroll() {
    console.log('Scrolled!');
  }

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

更新阶段

更新阶段是组件的状态发生改变时的阶段。该阶段包含以下五种生命周期方法：

shouldComponentUpdate

在组件状态发生改变后，调用该函数，通常用于确定是否需要重新渲染组件，返回值为true表示需要重新渲染，false则不需要。

例如：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.name === nextProps.name && this.state.count === nextState.count) {
      return false;
    }
    return true;
  }

  render() {
    return (
      <div>{this.props.name} clicked {this.state.count} times</div>
    );
  }
}

render

组件在更新阶段的渲染方法与挂载阶段相同，请参考挂载阶段的render方法。

componentDidUpdate

在组件状态发生改变后调用，通常用于进行一些DOM的操作，比如更新页面的title或者重新渲染某个子组件。

例如：

class MyComponent extends React.Component {
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

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

卸载阶段

卸载阶段发生在组件被从DOM中移除时，该阶段包含以下一个生命周期方法：

componentWillUnmount

在组件被卸载前调用，通常用于进行一些清理操作，比如解绑事件、清除定时器等。

例如：

class MyComponent extends React.Component {
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

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

以上就是React组件的生命周期详解，清楚地了解和理解React组件的生命周期对于我们编写高质量的React组件非常有帮助。

示例1

下面是一个使用React组件生命周期进行网络请求的示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      isLoading: false
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data, isLoading: false }));
  }

  render() {
    const { data, isLoading } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {data.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
    );
  }
}

上面代码中，我们在组件挂载后调用了fetch函数获取数据，如果数据获取成功，则将数据保存在组件的状态中，然后重新渲染组件以显示数据。如果数据正在加载中，则在组件渲染之前渲染“Loading…”文本。

示例2

下面是一个使用React组件生命周期进行页面title更新的示例：

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 });
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

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

上面代码中，我们在每次更新组件的时候都将页面的title更新成“你点击了x次”格式。