ReactJS componentDidUpdate() 方法

componentDidUpdate() 方法允许我们在组件更新时执行 React 代码。传递给组件的 props 更改时要发出的所有网络请求都在这里编码。

componentDidUpdate() 在 componentDidMount() 之后调用，并且对于在组件状态更改时执行某些操作很有用。

句法：

componentDidUpdate(prevProps, prevState, snapshot)

参数：以下是此函数中使用的参数：

• prevProps：之前传递给组件的 props
• prevState：组件的先前状态
• 快照： getSnapshotBeforeUpdate() 方法返回的值

提示：为避免无限循环，所有网络请求都需要在条件语句中，如下所示：

componentDidUpdate(prevProps, prevState) {
  if (prevState.data !== this.state.data) {
    // Now fetch the new data here.
  }
}

创建反应应用程序：

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

npx create-react-app functiondemo

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

cd functiondemo

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

项目结构

示例：在此示例中，我们将构建一个 React 应用程序，该应用程序在组件状态更新时更改标题中的文本。

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

Javascript

import React from 'react';
  
class App extends React.Component {
  // Defining the state
  state = {
    company: 'GFG'
  };
  
  componentDidMount() {
    // Changing the state after 600ms
    setTimeout(() => {
      this.setState({ company: 'GeeksForGeeks' });
    }, 600);
  }
  
  componentDidUpdate() {
    document.getElementById('disclaimer').innerHTML =
      'P.s:  GFG is also known as ' + this.state.company;
  }
  
  render() {
    return (
      

        

          Greatest Science Portal For Geeks :
          {this.state.company}
          

        
      
    );
  }
}
  
export default App;

注意：您可以将自己的样式应用于应用程序。

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

npm start

输出：

输出