ReactJS componentDidMount() 方法

在 ReactJS 中，componentDidMount() 是一个类组件的生命周期方法，它会在组件第一次被渲染到 DOM 上后执行。

功能

componentDidMount() 方法常用于进行一些初次渲染后的操作，如设置定时器、发送网络请求等。此方法一般用于执行一些副作用操作。

语法

componentDidMount() {
  // method body
}

使用场景

发送网络请求

在组件初次渲染后，可以通过 componentDidMount() 方法发送网络请求，从而获取数据并更新组件状态，如下代码所示：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

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

ReactDOM.render(<App />, document.getElementById("root"));

设置计时器

通过 componentDidMount() 方法，在组件初次渲染后可以设置计时器，从而定时执行一些操作，如下代码所示：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0
    };
  }

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

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

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

初始化第三方库

在组件初次渲染后，可以使用 componentDidMount() 方法初始化一些第三方库，如图表库、地图库等，如下代码所示：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      chartData: []
    };
  }

  componentDidMount() {
    const chart = new Chart(document.getElementById("myChart"), {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
            ],
            borderColor: [
              "rgba(255, 99, 132, 1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    this.setState({ chartData: chart });
  }

  render() {
    return <canvas id="myChart" />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

生命周期方法执行顺序

在 ReactJS 中，组件的生命周期总共有 8 个阶段，以下是它们的执行顺序：

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()
5. shouldComponentUpdate()
6. getSnapshotBeforeUpdate()
7. componentDidUpdate()
8. componentWillUnmount()

总结

componentDidMount() 方法是 ReactJS 组件生命周期的一个重要阶段，通过它我们可以在组件初次渲染后执行一些操作，如发送网络请求、设置计时器、初始化第三方库等。需要注意的是，由于此方法只会在组件初次渲染后执行一次，因此建议在此方法中进行一些只需要执行一次的操作。