ReactJS 中的 ComponentWillMount() 方法是什么？

React 需要几个组件来表示特定功能的逻辑单元。当涉及到更新业务逻辑、应用程序配置更新和 API 调用时，componentWillMount 生命周期挂钩是一个理想的选择。

componentWillMount() 生命周期钩子主要用于在实际渲染发生之前实现服务器端逻辑，例如对服务器进行 API 调用。 componentWillMount() 方法允许我们在组件被加载或挂载到 DOM（文档对象模型）中时同步执行 React 代码。这个方法在 React 生命周期的挂载阶段被调用。

ComponentWillMount() 通常用于在加载组件或从服务器获取数据时显示加载器。

特征：

• 它允许我们在将内容显示给最终用户之前对其进行修改，从而给最终用户留下更好的印象，否则，任何内容都可以显示给最终用户。
• 因为它是一个 react 系统定义的方法，如果我们想通过编写任何自定义函数来实现相同的功能，那么它将无法为我们提供与 React 生命周期的一部分相同的性能，因此它被优化。

句法：

• 在执行任何活动之前，他们首先调用的是构造函数，然后调用 componentWillMount()函数。
• 在这个函数中，我们可以执行一些重要的活动，比如为最终用户修改 HTML 视图等。
• 接下来将调用渲染，因为我们已经在 componentWillMount() 部分进行了一些修改，更改后的值将显示在用户端。

Javascript

componentWillMount() {
    // Perform the required 
    // activity inside it
}
  
// Call the render method to 
// display the HTML contents.
render(){
}

创建一个反应应用程序：

第 1 步：运行以下命令创建一个新项目

npx create-react-app my-app

第2步：上面的命令将创建应用程序，您可以使用以下命令运行它，您可以在浏览器中查看您的应用程序。

cd my-app
npm start

项目结构：它将如下所示

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

ComponentWillMount 操作 State()：生命周期钩子 componentWillMount() 在初始渲染之前触发，该函数在组件的生命周期内只会触发一次。一旦组件启动，当前状态值将被更新的值覆盖，但请记住，这在组件的生命周期中发生一次。最后一步是在 render()函数中打印消息，如下所示。

Javascript

import React, { Component } from "react";
  
  
class App extends Component{
constructor() {
    super();
    this.state = {
      message: "This is initial message"
    };
}
  
render() {
    return (
      

        
Update the state
        
  {this.state.message} 
         
      
    );
}
};
  
export default App;

说明：当我们运行上面的例子时，消息变量的值会在组件启动后更新；这是操作业务逻辑的标准方法。

输出：

ComponentWillMount() 进行 API 调用： componentWillMount() 是在组件启动后进行 API 调用并将值配置为状态。要进行 API 调用，请使用 Axios 等 HttpClient，或者我们可以使用 fetch() 来触发 AJAX 调用。带有 fetch() API 调用的函数如下所示。 fetch() 与虚拟 API URL 一起使用，它访问服务器并获取数据；最后，响应被更新到包含对象的状态变量 todo 中。从 API 获得响应后，我们可以根据需要使用数据。下面是一个完整的例子

虚拟 API URL： https://jsonplaceholder.typicode.com/todos/3

Javascript

import React, { Component } from "react";
  
class ApiCall extends Component {
  constructor() {
    super();
    this.state = {
      todo: {}
    };
  }
  
  componentWillMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/3")
      .then(response => response.json())
      .then(json => {
        this.setState({ todo: json });
      });
  }
  
  render() {
    const { todo } = this.state;
    console.log(todo)
    return (
      

        
API call :
  
        Todo title : 
{todo.title}
  
        Todo completed : 
        
{todo.completed === true ? "true" : 
                            "false"}
      
    );
  }
}
  
export default ApiCall;

输出：

注意：与其他生命周期方法不同，更改 componentWillMount 内部的状态值不会一次又一次地重新运行组件。