React生命周期函数深入全面介绍

关于React生命周期函数深入全面介绍的攻略，这里为大家详细介绍一下：

什么是React生命周期函数

React组件有生命周期，即从组件被创建到最终组件销毁过程中的各个阶段。在这些阶段，React提供了一组函数，这些函数分别对应不同阶段中的操作，这就是React生命周期函数。

React生命周期函数总共分为三类：

1. 挂载阶段（Mounting）：组件被创建并插入DOM中的过程；
2. 更新阶段（Updating）：组件被重新渲染的过程；
3. 卸载阶段（Unmounting）：组件被移除出DOM的过程。

React生命周期函数详解

挂载阶段的生命周期函数

constructor

当组件被创建时，constructor这个函数就会被调用。我们可以在这个函数中初始化state和绑定事件。

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

componentWillMount

在组件将要被挂载到页面的时刻执行，该函数只会执行一次，所以通常情况下我们并不需要使用此函数。在16.3.0版本之后被废弃了，但是在16.4.0版本之后又重新启用了，不过官方文档建议不要再使用该函数。

render

在该函数中，我们需要返回一个jsx元素，它是组件的模板。Virtual Dom会根据每次组件render的返回值来计算DOM树的变化。

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

componentDidMount

组件挂载完成之后，即被插入到DOM中，该函数会被执行一次。在 componentDidMount 中一般完成如下操作：

1.​发送 Ajax 请求。
2.​手动调用其他 Refs 等。

componentDidMount() {
  console.log("componentDidMount");
}

组件更新阶段的生命周期函数

shouldComponentUpdate

该函数返回一个布尔值，用于控制组件是否需要重新渲染。在一些必要的场景下，我们可以用该函数优化组件的渲染效率。

shouldComponentUpdate(nextProps, nextState) {
  if (this.state.count === nextState.count) {
    return false;
  }
  return true;
}

componentWillReceiveProps

该函数在组件接收到 props 的时候被触发。

componentWillReceiveProps(nextProps) {
  console.log("componentWillReceiveProps", nextProps);
  if (nextProps.count === 0) {
    this.setState({
      count: 100
    });
  }
}

componentWillUpdate

在组件被重新渲染之前，该函数被调用。

componentWillUpdate() {
  console.log("componentWillUpdate");
}

render

渲染组件。

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

componentDidUpdate

在组件被重新渲染之后，该函数被调用。

componentDidUpdate() {
  console.log("componentDidUpdate");
}

卸载阶段的生命周期函数

componentWillUnmount

在组件被卸载及销毁之前直接调用。

componentWillUnmount() {
  console.log("componentWillUnmount");
}

React生命周期函数示例

示例一：今天你学习了吗

这个示例中，我们会创建一个计数器组件，用它来控制今天你是否学习了。

代码如下：

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, study: false };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.count === nextState.count) {
      return false;
    }
    return true;
  }

  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
    if (nextProps.count === 0) {
      this.setState({
        count: 100,
        study: true
      });
    }
  }

  componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

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

  render() {
    return (
      <div>
        <h1>今天你学习了吗？</h1>
        {this.state.study && <h3>恭喜你学习了一天！</h3>}
        <h3>{this.state.count}</h3>
        <button onClick={this.handleClick}>学习了</button>
      </div>
    );
  }
}

export default Counter;

示例二：天气预报

在这个示例中，我们会创建一个天气组件，用它来展示当天的天气。

代码如下：

import React from "react";

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = { temp: 25, weather: "晴天" };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      const temp = this.state.temp + Math.random() * 10 - 5;
      const weather = Math.random() > 0.5 ? "晴天" : "阴天";
      this.setState({ temp, weather });
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h2>今天的天气</h2>
        <p>{`温度: ${this.state.temp}度`}</p>
        <p>{`天气状况: ${this.state.weather}`}</p>
      </div>
    );
  }
}

export default Weather;

总结

在React中，生命周期函数是非常重要的概念，掌握生命周期函数可以更好地理解和掌握React的组件开发。

在日常开发中，根据实际需要，可以选择合适的生命周期函数，来优化组件的渲染效率，提升用户体验。