ReactJS componentDidUpdate()用法及代碼示例

componentDidUpdate()方法允許我們在組件更新時執行React代碼。傳遞給組件的道具更改時要進行的所有網絡請求都在此處編碼。

componentDidUpdate()is在componentDidMount()之後調用，當組件的狀態更改時，對執行某些操作很有用。

用法:

componentDidUpdate(prevProps, prevState, snapshot)

參數：以下是此函數中使用的參數：

prevProps:先前的道具傳遞到組件
prevState:組件的先前狀態
snapshot:getSnapshotBeforeUpdate()方法返回的值

提示：為避免無限循環，所有網絡請求都必須位於條件語句中，如下所示：

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

創建React應用程序：

步驟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 ( 
      <div> 
        <h1 style={{ 
          margin:'auto', 
          width:'50%', 
          padding:20, 
          marginTop:'10%', 
          border:'solid 1px black', 
          textAlign:'center', 
          fontSize:18, 
        }}> 
          Greatest Science Portal For Geeks:
          {this.state.company} 
          <div id="disclaimer"></div> 
        </h1> 
      </div> 
    ); 
  } 
} 
  
export default App;

注意：您可以將自己的樣式應用於應用程序。

運行應用程序的步驟：從項目的根目錄中使用以下命令運行應用程序：

npm start

輸出：

輸出

相關用法

注：本文由純淨天空篩選整理自rbbansal大神的英文原創作品 ReactJS componentDidUpdate() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。