问题描述
在一个不覆盖shouldComponentUpdate的组件中，forceUpdate和setState有什么区别吗?
In a component that does not override shouldComponentUpdate, is there any difference between forceUpdate and setState?
更新:我已经知道文档说了什么，并且 forceUpdate 不是推荐的方法.我只是想更深入地了解正在发生的事情.我想知道为什么?而且我已经知道 setState 将传递的对象(状态delta" - 有点像 sql 更新)与当前状态对象合并.
Update: I already know what the docs say and that forceUpdate is not the recommended way to do it. I am just trying to gain a deeper understanding of what is going on. I'd like to know why? And I already know that setState merges the passed object (state "delta" - kind of like an sql update) with the current state object.
假设一个简单的用例:不需要撤消或时间旅行功能.无需在 shouldComponentUpdate 内部进行指针比较.事实上，根本不需要使用 shouldComponentUpdate.
Suppose a simple use-case: no need for undo or time-travel functionality. No need to do pointer comparison inside shouldComponentUpdate. In fact, no need to use shouldComponentUpdate at all.
在这种情况下，在我看来，改变状态并调用 forceUpdate() 是使用 React 的一种完全有效的方式.从黑匣子的角度来看，这两种技术似乎具有完全相同的效果:
In that case, it appears to me, that mutating state and calling forceUpdate() is a perfectly valid way to use React. From a black box perspective, these two techniques appear to have the exact same effect:
技术 #1:this.state.x = 10;this.forceUpdate();
Technique #1:this.state.x = 10;this.forceUpdate();
技术 #2:this.state.setState({x:10});
Technique #2:this.state.setState({x:10});
再说一次，我已经知道有些人更喜欢从不改变状态.并使用函数式编程风格.我只是想知道是否有任何技术原因可以避免使用技术 #1.还是我遗漏了什么?
Again, I already know that some people prefer to never mutate state. And to use the functional programming style. I was just wondering if there is any technical reason to avoid Technique #1. Or am I missing something?
推荐答案
关于setState()
的概述setState() 函数通常用于使用一个或多个新状态属性更新组件状态.这是改变状态和管理视图更新的典型方式.
General about setState()
The setState() function is typically used to update the component state with one or more new state properties. This is the typical way of mutating your state and managing view updates.
来自官方文档:
setState() 将更改加入组件状态并告诉 React这个组件及其子组件需要重新渲染更新状态.这是您用来更新用户的主要方法响应事件处理程序和服务器响应的接口.
关于forceUpdate()的概述
forceUpdate() 函数只是一种强制重新渲染相关组件及其子组件的方法.它根本不会改变状态.
General about forceUpdate()
The forceUpdate() function is just a way to force a re-render of the component and its children in question. It does not mutate the state at all.
如果可能，您应该避免使用此函数，因为它偏离了 React 的思维方式，其中您的状态和道具唯一负责使您的应用程序逻辑与您的视图保持同步.
You should avoid to use this function, when possible, as it deviates from the React mindset where your state and props are solely responsible for keeping your application logic up-to-date with your view.
来自官方文档:
默认情况下，当你的组件的 state 或 props 发生变化时，你的组件将重新渲染.如果你的 render() 方法依赖于一些其他数据，你可以告诉 React 该组件需要重新渲染通过调用 forceUpdate().
通常你应该尽量避免使用 forceUpdate() 并且只从 this.props 和 this.state 中读取 >render().
Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().
差异
需要注意的是，forceUpdate() 将跳过检查shouldComponentUpdate() 中的逻辑(如果有的话)，其中setState() 不跳过.
The differences
It's important to note that forceUpdate() will skip checking the logic in shouldComponentUpdate() (if you have any), where as setState() does not skip it.
这里有趣的一点是，以下两行总是会产生相同的结果:
An interesting note here is that the following 2 lines will always yield the same results:
this.setState(this.state);
this.forceUpdate();
...除非 shouldComponentUpdate() 可以返回 false 如上所述.
...unless shouldComponentUpdate() can return false as explained above.
除上述外，两者在功能上没有区别.
Other than the above, there is no functional difference between the two.
这篇关于在 React 中，setState 和 forceUpdate 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！