在 React 中，setState 和 forceUpdate 有什么区别

Question

在不覆盖shouldComponentUpdate的组件中，forceUpdate和setState有什么区别吗？

更新：我已经知道文档说了什么，而 forceUpdate 不是推荐的方法。我只是想更深入地了解正在发生的事情。我想知道为什么？而且我已经知道 setState 将传递的对象（状态“delta” - 有点像 sql 更新）与当前状态对象合并。

假设一个简单的用例：不需要撤消或时间旅行功能。无需在 shouldComponentUpdate 内部进行指针比较。事实上，完全不需要使用 shouldComponentUpdate。

在这种情况下，在我看来，突变状态和调用 forceUpdate() 是使用 React 的一种完全有效的方式。从黑盒的角度来看，这两种技术似乎具有完全相同的效果：

技巧#1： this.state.x = 10; this.forceUpdate();

技巧#2： this.state.setState({x:10});

再一次，我已经知道有些人宁愿从不改变状态。并使用函数式编程风格。我只是想知道是否有任何技术原因可以避免使用技术 #1。还是我错过了什么？

Answer 1

一般关于setState()

setState() 函数通常用于更新具有一个或多个新状态属性的组件状态。这是改变状态和管理视图更新的典型方式。

来自官方文档：

setState() 将组件状态更改入队并告诉 React 这个组件及其子组件需要重新渲染 更新状态。这是您用来更新用户的主要方法 响应事件处理程序和服务器响应的接口。

---

一般关于forceUpdate()

forceUpdate() 函数只是一种强制重新渲染相关组件及其子组件的方法。它根本不会改变状态。

你应该尽可能避免使用这个函数，因为它偏离了 React 的思维模式，你的 state 和 props 单独负责让你的应用程序逻辑与你的视图保持同步。

来自官方文档：

默认情况下，当你的组件状态或道具改变时，你的 组件将重新渲染。如果您的 render() 方法取决于某些 其他数据，你可以告诉 React 组件需要重新渲染 致电forceUpdate()。

通常你应该尽量避免使用forceUpdate()，并且只读取render()中的this.props和this.state。

---

区别

重要的是要注意forceUpdate() 将跳过检查shouldComponentUpdate()（如果有的话）中的逻辑，而setState() 不会跳过它.

这里有一个有趣的注意事项，以下 2 行将始终产生相同的结果：

this.setState(this.state);
this.forceUpdate();

...除非shouldComponentUpdate() 可以返回false，如上所述。

除上述之外，两者在功能上没有区别。

Answer 2

在 FullStack React 一书中，有一章介绍了一个基本的 Timer 应用程序。在本章中，他们使用 forceUpdate() 重新渲染 UI，解释如下：

“你可能会问：如果我们不连续调用会不会更有效率？ forceUpdate() 在未运行的计时器上？ 事实上，我们会节省几个周期。但这不值得添加代码 复杂。 React 会调用 render() 来执行一些廉价的操作 JavaScript 中的操作。然后它将这个结果与之前的结果进行比较 调用 render() 并看到没有任何变化。它停在那里——它不会 尝试任何 DOM 操作。” 摘自：Anthony Accomazzo、Ari Lerner、David Guttman、Nate Murray、Clay 奥尔索普和泰勒麦金尼斯。 “全栈反应。” iBooks。

我认为这意味着如果使用 setState 是可行的，那么您应该获得绝对的最大性能，但如果所讨论的操作并不昂贵并且可以为您节省大量代码复杂性，那么它可能 可以使用 forceUpdate() 重新渲染 UI。这当然是我的解释，你可能应该通读这本书以从中获得更多的背景信息，也许它会帮助你做出自己的决定。

Answer 3

Flutter 是一个基于 React 架构的框架。

我认为这篇 Flutter 博文实际上给出了这个问题的最佳答案：

Avoiding Empty State Callbacks

注意：Flutter 的“空 setState 调用”大致类似于 React 的 forceUpdate。