如何在 React 中使用 componentWillMount

2020-07-31 08:00:00 · 飞浪

介绍使用React之类的库需要多个组件来表示特定功能的逻辑单元。因此，它需要消耗资源。componentWillMount()生命周期钩子主要用于在实际渲染发生之前实现服务器端逻辑，例

介绍

使用 React 之类的库需要多个组件来表示特定功能的逻辑单元。因此，它需要消耗资源。componentWillMount ()生命周期钩子主要用于在实际渲染发生之前实现服务器端逻辑，例如对服务器进行 API 调用。在本指南中，您将学习如何在初始组件渲染后使用componentWillMount()并进行 API 调用。

使用 componentWillMount() 来操作状态

众所周知，生命周期钩子componentWillMount在初次渲染之前触发，并且该函数在组件的生命周期内只会触发一次。

它用于在 DOM 渲染之前更新状态值，创建一个状态变量，如下所示。

      constructor() {
    super();
    this.state = {
      message: "This is initial message"
    };
}
    

如上所示，有一个名为message的状态变量，带有默认字符串。现在更新消息，如下所示。

      componentWillMount() {
    this.setState({ message: "This is an updated message" });
}
    

一旦组件启动，当前状态值将被更新的值覆盖，但请记住这在组件的生命周期中只会发生一次。

最后一步是在render()函数中打印消息，如下所示。

      render() {
    return (
      <div>
        <p>Update the state</p>
        <hr />
        {this.state.message}
      </div>
    );
}
    

当您运行上述示例时，一旦组件启动，消息变量的值就会更新；这是操作业务逻辑的标准方法。

使用 componentWillMount() 进行 API 调用

componentWillMount()的主要用途之一是在组件启动后进行 API 调用并将值配置到状态中。

要进行 API 调用，请使用HttpClient（例如Axios ），或者您可以使用fetch()来触发 AJAX 调用。

带有fetch() API 调用的函数如下所示。

      componentWillMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => {
        this.setState({ todo: json });
      });
}
    

fetch()与虚拟 API URL 一起使用，它会访问服务器并获取数据；最后，响应会更新到包含对象的状态变量todo中。

      this.setState({ todo: json });
    

从 API 获得响应后，您可以根据需要使用数据。下面是一个完整的示例。

      import React, { Component } from "react";

class ApiCall extends Component {
  constructor() {
    super();
    this.state = {
      todo: {}
    };
  }

  componentWillMount() {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => {
        this.setState({ todo: json });
      });
  }

  render() {
    const { todo } = this.state;
    console.log(todo)
    return (
      <div>
        <p>API call :</p>
        Todo title : <p>{todo.title}</p>
        Todo completed : <p>{todo.completed === true ? "true" : "false"}</p>
      </div>
    );
  }
}

export default ApiCall;
    

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

注意：根据 React 官方文档，生命周期钩子componentWillMount已弃用。它将一直工作到版本 17，但您可以将其重命名为UNSAFE_componentWillMount。componentWillMount钩子将无法访问原生 DOM 元素，因为它在render()函数之前触发，因此元素（HTML）将不可用。

结论

在更新业务逻辑、应用程序配置更新和 API 调用时，componentWillMount生命周期钩子是理想的选择。

明智地使用它，因为一旦发现更改，应用程序就有可能需要重新运行。您已经了解了如何进行 AJAX API 调用并更新初始状态值。希望这对您有所帮助。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中使用 componentWillMount

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

componentWillMount() { fetch("https://jsonplaceholder.typicode.com/todos/1") .then(response => response.json()) .then(json => { this.setState({ todo: json }); }); }

import React, { Component } from "react"; class ApiCall extends Component { constructor() { super(); this.state = { todo: {} }; } componentWillMount() { fetch("https://jsonplaceholder.typicode.com/todos/1") .then(response => response.json()) .then(json => { this.setState({ todo: json }); }); } render() { const { todo } = this.state; console.log(todo) return ( <div> <p>API call :</p> Todo title : <p>{todo.title}</p> Todo completed : <p>{todo.completed === true ? "true" : "false"}</p> </div> ); } } export default ApiCall;