forceUpdate 与 setState 有什么区别？

forceUpdate() 和 setState() 之间的区别在于 setState() 如果该组件的某些状态或道具发生更改，则重新渲染该组件。当我们调用 setState() 时，生命周期方法 shouldComponentUpdate() 方法会自动调用来决定组件是否应该重新渲染。如果没有重新渲染的理由， shouldComponentUpdate() 方法退出更新生命周期。

而 forceUpdate() 方法在不改变状态或道具的情况下重新渲染组件。当我们调用 forceUpdate() 时，它会重新渲染组件并跳过 shouldComponentUpdate() 方法。

注意：我们应该尽量停止使用 forceUpdate() 并在渲染期间从this.props和this.state中读取。

forceUpdate 与 setState 方法之间的区别是：

forceUpdate Method	setState Method
It re-render the component without even changing the state or props.	It re-render the component if some state or props of that component changed.
It skips the lifecycle shouldComponentUpdate method.	It calls the lifecycle shouldComponentUpdate method.
This method is not recommended.	We can use setState when want to update the state.
It method basically writes the data to this.state and then it calls the render method.	It method does not write the data to this.state, it just simply calls the render method.

示例 1：使用 setState 方法

句法：

this.setState({ state: this.state });

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

App.js

import React, { Component } from 'react';
  
class App extends Component {
  state = {
    name: '',
  }
  
  handleChange = (x) => {
    const { name, value } = x.target;
    this.setState({
      [name]: value,
    });
  }
  
  render() {
    return (
      

        Name:
        
        

          
 Hi, {this.state.name}!
        
      
    );
  }
}
  
export default App;

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

npm start

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

说明：从上面的代码中我们可以看到，当我们在文本框中键入时，setState() 方法调用了设置 name 的最新值并每次重新渲染组件。

示例 2. 使用 forceUpdate 方法

句法：

this.forceUpdate()

App.js：现在在App.js文件中写下以下代码。在这里，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。重新渲染组件时会重新生成随机数。