在React中,setState和forceUpdate之间有什么区别

Question

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

更新:我已经知道文档说的内容,并且forceUpdate不是推荐的方法.我只是想更深入地了解正在发生的事情.我想知道为什么？我已经知道setState将传递的对象(状态"delta" - 类似于sql update)与当前状态对象合并.

假设一个简单的用例:不需要撤消或时间旅行功能.无需在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思维模式,其中您的州和道具全权负责使您的应用程序逻辑与您的视图保持同步.

来自官方文档:

默认情况下,当组件的状态或道具发生更改时,组件将重新呈现.如果您的render()方法依赖于其他一些数据,您可以告诉React该组件需要通过调用重新呈现forceUpdate().

通常你应该尽量避免使用forceUpdate()和只读取this.props和this.state使用render().

差异

重要的是要注意,forceUpdate()将跳过检查逻辑shouldComponentUpdate()(如果你有),在哪里setState() 不跳过它.

这里有一个有趣的注意事项是,以下两行将始终产生相同的结果:

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

...除非shouldComponentUpdate()能false按上述说明返回.

除此之外,两者之间没有功能差异.