componentDidMount 挂钩 - JavaScript

componentDidMount 是 React 组件生命周期方法之一。它是在组件渲染完成并被插入 DOM 树后立即调用的方法。componentDidMount 方法可以用来进行一次性的初始化操作，例如获取数据、订阅事件等。

在组件挂载完成后，componentDidMount 方法会被自动调用，且只会执行一次。在这个方法中，你可以安全地访问 DOM 元素，发起网络请求，或执行其他一些需要在组件加载完成后进行的操作。

以下是一个示例，展示了如何在 componentDidMount 中发起 AJAX 请求：

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 发起 AJAX 请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 在请求成功后，更新组件状态
        this.setState({ data });
      })
      .catch(error => {
        // 在请求失败时，处理错误
        console.error('Error:', error);
      });
  }

  render() {
    return <div>MyComponent</div>;
  }
}

在这个示例中，componentDidMount 方法被用来发起 AJAX 请求。在请求成功后，我们使用 setState 方法更新组件的状态，以触发重新渲染。如果请求失败，我们打印错误日志到控制台。

需要注意的是，componentDidMount 方法仅在组件的初始渲染时调用一次。如果你想在组件的更新过程中执行一些操作，可以使用 componentDidUpdate 方法。

通过 componentDidMount 方法，你可以在组件加载完成后执行初始化任务，使组件具备更丰富的功能和交互性。

参考文档：React 组件生命周期