探索 React 中的 forceUpdate 与 setState：核心区别与应用场景

forceUpdate() 和 setState() 之间的主要区别在于，setState() 仅当组件的状态或属性发生变化时才会重新渲染该组件。当我们调用 setState() 时，生命周期方法 shouldComponentUpdate() 会自动被调用，以此来决定组件是否应该进行重新渲染。如果没有必要进行重新渲染，shouldComponentUpdate() 方法将会终止更新生命周期。

注意：

我们应该尽可能地停止使用 forceUpdate()，并尝试在渲染过程中直接从 this.props 和 this.state 中读取数据。

目录

• 使用 setState 方法
• 使用 forceUpdate 方法

创建 React 应用的步骤：

步骤 1：

创建一个 React 项目文件夹，并通过 npm i create-react-app 在本地进行安装。

npm create-react-app project

步骤 2：

创建项目文件夹后，使用以下命令进入该项目目录。

cd project

项目结构：

!image

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

使用 setState 方法：

当组件的状态或属性发生变化时，它会重新渲染该组件。

语法：

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

示例：

正如我们从下面的代码中看到的那样，当我们在文本框中输入内容时，setState() 方法会被调用，它会设置 name 的最新值，并在每次输入时重新渲染组件。

JavaScript


CODEBLOCK_4efdb633

运行应用程序的步骤：

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

npm start

输出：

现在打开你的浏览器并访问 http://localhost:3000/，你将看到以下输出结果：

!image

使用 forceUpdate 方法：

即使在不改变状态或属性的情况下，它也会强制重新渲染组件。

语法：

this.forceUpdate()

解释：

由于调用了 forceUpdate() 方法，组件在属性或状态未改变的情况下仍然进行了重新渲染。当组件重新渲染时，随机数会被重新生成。

JavaScript


CODEBLOCK_5261d4f6

运行应用程序的步骤：

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

npm start

输出：

现在打开你的浏览器并访问 http://localhost:3000

!image

forceUpdate 与 setState 方法的区别如下：

setState 方法

—

只有当组件的某些状态或属性发生变化时，它才会重新渲染组件。

它会调用 shouldComponentUpdate 生命周期方法。

当我们想要更新状态时，可以使用 setState。

该方法不将数据写入 this.state，它只是简单地调用 render 方法。