ReactJS componentDidMount() 方法

componentDidMount() 方法允许我们在组件已经放置在 DOM（文档对象模型）中时执行 React 代码。这个方法在 React 生命周期的挂载阶段被调用，即在组件被渲染之后。

所有 AJAX 请求和 DOM 或状态更新都应该在 componentDidMount() 方法块中进行编码。我们也可以在此处设置所有主要订阅，但为避免任何性能问题，请始终记住在 componentWillUnmount() 方法中取消订阅它们。

句法：

componentDidMount()

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app functiondemo

第 2 步：创建项目文件夹后，即 functiondemo ，使用以下命令移动到它：

cd functiondemo

项目结构：它将如下所示。

项目结构

示例：在此示例中，我们将构建一个名称颜色应用程序，当组件在 DOM 树中呈现时，它会更改文本的颜色。

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props);
  
    // Initializing the state 
    this.state = { color: 'lightgreen' };
  }
  componentDidMount() {
  
    // Changing the state after 2 sec
    // from the time when the component
    // is rendered
    setTimeout(() => {
      this.setState({ color: 'wheat' });
    }, 2000);
  }
  render() {
    return (
      

        

          GeeksForGeeks
        
  
      
    );
  }
}
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：