【问题标题】:How does shallow comparison worth with Pure Component and setState?纯组件和 setState 的浅比较值如何?
【发布时间】:2019-12-01 20:01:49
【问题描述】:

在学习纯组件时,我无法理解在复杂对象之间进行浅层比较的方式,例如状态对象。

在一个例子中,一个 setTimeout 方法被用来更新一个简单的值,例如状态对象中的计数器编号,但该值刚刚设置为现有值。据我了解, setState 创建了一个新对象并且不会改变原始状态。

所以在浅比较中不会有 2 个不同的状态对象指向 2 个不同的引用,即使它们包含具有相同值的简单属性,所以比较应该始终显示对象是不同的,但示例说因为值相同,组件不会重新渲染,所以浅比较不仅仅是查看对象引用吗?

【问题讨论】:

  • 请给我们一些上下文,我们怎么能猜出你说的是哪个例子
  • 具体例子没关系,我已经在setState的上下文中解释了问题是什么

标签: javascript reactjs components


【解决方案1】:

根据文档, shallowCompare 通过遍历对象上的键并在任何键具有参数之间不严格相等的值时返回 false 来执行相等。当所有键的值严格相等时返回 true。所以它不会检查状态对象的引用。它将检查状态对象的属性。

  1. https://reactjs.org/docs/shallow-compare.html
  2. https://github.com/facebook/fbjs/blob/e85f39ae37e9650191e832c1d1ed8f02c272e9d1/packages/fbjs/src/core/shallowEqual.js#L39-L67

【讨论】:

  • 谢谢,我遇到的大约 4 个教程只提到在浅比较中比较对象引用,这让我感到困惑。从您的回答看来,钥匙也正在被检查。阅读完链接后,我想确认 Pure Components 是否也在使用,因为浅比较似乎不同。
  • 纯组件使用的是 shallowCompare 方法。此外,它使用shouldComponentUpdate 方法来更好地控制渲染过程。
猜你喜欢
  • 1970-01-01
  • 2020-11-18
  • 2021-03-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-25
  • 2016-07-05
  • 2012-07-14
  • 1970-01-01
相关资源
最近更新 更多