当前位置: 首页 > 面试题库 >

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

东方镜
2023-03-14
问题内容

覆盖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。还是我错过了什么?


问题答案:

一般关于 setState()

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

从官方文档:

setState()将组件状态更改入队,并告知React该组件及其子级需要使用更新后的状态重新呈现。这是用于响应事件处理程序和服务器响应而更新用户界面的主要方法。

一般关于 forceUpdate()

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

您应尽可能避免使用此功能,因为它会偏离React心态,后者的状态和属性 负责使应用程序逻辑与视图保持最新状态。

从官方文档:

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

通常情况下,你应该尽量避免的所有使用forceUpdate()和只读this.props,并this.staterender()

差异

重要的是要注意,forceUpdate()跳过
检查逻辑shouldComponentUpdate()(如果有),而setState() 不会跳过

有趣的是,以下两行将始终产生相同的结果:

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

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

除上述以外,两者之间没有功能上的区别。



 类似资料:
  • 本文向大家介绍react中的setState和replaceState的区别是什么?相关面试题,主要包含被问及react中的setState和replaceState的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 [react] react中的setState和replaceState的区别是什么?

  • 我是编程新手,如果我读官方文档,这让我有点难以理解。 我在这里读到反应路由器4 在本文中,作者讨论的是

  • 本文向大家介绍React Native和React有什么区别?相关面试题,主要包含被问及React Native和React有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 主要是底层 renders 层不同,React 使用的是 Visual DOM,React Native 替换成了native 组件。

  • 问题内容: 我正在观看有关React的Pluralsight课程,并且讲师指出,不应更改道具。我现在正在阅读有关道具与状态的文章(uberVU / react-guide),它说 道具和状态更改都会触发渲染更新。 文章稍后会说: 道具(属性的缩写)是组件的配置,如果可以的话,可以选择它的选项。它们是从上方接收的,并且是不变的。 所以道具可以改变,但它们应该是不变的? 什么时候应该使用道具,什么时候

  • 本文向大家介绍在React中组件和元素有什么区别?相关面试题,主要包含被问及在React中组件和元素有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 组件首字母大写 组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数

  • 问题内容: 我已经出于好奇而开始学习 React ,并且想知道React和React Native之间的区别- 尽管使用Google找不到满意的答案。React和React Native似乎具有相同的格式。它们的语法完全不同吗? 问题答案: ReactJS是一个JavaScript库,它支持前端Web并在服务器上运行,用于构建用户界面和Web应用程序。它遵循可重用组件的概念。 React Nati