ReactJS forceUpdate()用法及代碼示例

僅當組件的狀態或傳遞給它的道具發生變化時，React中的組件才會re-render，但是如果某些數據發生變化，如果我們需要更改組件的re-render，則我們將使用React的forceUpdate()方法。調用forceUpdate()將強製組件re-render，從而跳過該shouldComponentUpdate()方法而調用該組件的render()方法。

提示：通常，避免使用forceUpdate()，而隻能從render()中的this.props和this.state中讀取。

用法:

component.forceUpdate(callback)

雖然確實有一些使用forceUpdate()方法的用例，但最好在需要時使用掛鉤，道具，狀態和上下文來對組件進行re-render處理。

創建React應用程序：

步驟1：使用以下命令創建React應用程序：

npx create-react-app functiondemo

第2步：創建項目文件夾(即functiondemo)後，使用以下命令將其移至該文件夾：

cd functiondemo

項目結構：如下圖所示。

項目結構

例：在此示例中，我們將通過調用forceUpdate()方法來構建一個React應用程序，該應用程序在單擊按鈕時將組件re-render作為組件。

App.js：現在在App.js文件中寫下以下代碼。在這裏，App是我們編寫代碼的默認組件。

import React from 'react'; 
  
class App extends React.Component { 
  reRender = () => { 
    // calling the forceUpdate() method 
    this.forceUpdate(); 
  }; 
  render() { 
  
    console.log('Component is re-rendered'); 
    return ( 
      <div> 
        <h2>GeeksForGeeks</h2> 
        <button onClick={this.reRender}>Click To Re-Render</button> 
      </div> 
    ); 
  } 
} 
export default App;

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

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

npm start

輸出：