如何强制 ReactJS 在每次 setState 调用时重新渲染？

当 React 组件的 state 或 props 发生变化时，该组件将立即重新渲染。当状态从代码中的某处更新时，许多用户界面 (UI) 组件会立即重新呈现。

如果我们想在不做任何更改的情况下渲染组件，我们可以使用 foceUpdate() 方法。当我们调用 forceUpdate() 时，它会重新渲染组件并跳过 shouldComponentUpdate() 方法。

如果没有理由重新渲染， shouldComponentUpdate() 方法允许您的组件退出更新生命周期。

句法：

this.forceUpdate()

创建反应应用程序：

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

  npx create-react-app foldername

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

  cd foldername

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

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

App.js

import React from 'react';
class App extends React.Component {
  
  handleForceUpdate = () => {
    this.forceUpdate();
  };
  
  render() {
    return (
      

        

         Example of forceUpdate() method to 
         show re-rendering 


         without changing state or props
        
        
          FORCE UPDATE
        
        
Number is : 
           {Math.floor(Math.random() * (100000 - 1 + 1)) + 1}
        
      
    );
  }
}
  
export default App;

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：从上面的例子中我们可以看出，由于调用了 forceUpdate() 方法，组件正在重新渲染，而不会更改 props 或 state。重新渲染组件时会重新生成随机数。