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

浅表比较如何在反应中起作用

淳于开畅
2023-03-14
问题内容

在此 React
文档中,据说

shallowCompare对当前props和nextProps对象以及当前状态和nextState对象执行浅层相等性检查。

我无法理解的是,如果它浅浅地比较对象,则shouldComponentUpdate方法将始终返回true,因为

我们不应该改变国家。

如果我们不改变状态,则比较将始终返回false,因此shouldComponent更新将始终返回true。我对它的工作方式以及如何将其覆盖以提高性能感到困惑。


问题答案:

浅比较会检查是否相等。比较标量值(数字,字符串)时,它会比较它们的值。当比较对象时,它不比较它们的属性-仅比较它们的引用(例如“它们是否指向同一对象?”)。

让我们考虑user物体的形状

user = {
  name: "John",
  surname: "Doe"
}

范例1:

const user = this.state.user;
user.name = "Jane";

console.log(user === this.state.user); // true

注意,您更改了用户名。即使有了这种变化,对象也是相等的。他们引用是完全相同的。

范例2:

const user = clone(this.state.user);
console.log(user === this.state.user); // false

现在,无需更改对象属性即可将它们完全不同。通过克隆原始对象,可以创建具有不同参考的新副本。

克隆功能可能如下所示(ES6语法)

const clone = obj => Object.assign({}, ...obj);

浅比较是检测更改的有效方法。期望您不要变异数据。



 类似资料:
  • 在React的这篇文档中,据说 shallowCompare对current props和nextProps对象以及current state和nextState对象执行浅层相等性检查。 我无法理解的是,如果它简单地比较了对象,那么componentupdate方法应该总是返回true,就像 如果我们没有改变状态,那么比较将始终返回false,因此shouldComponent更新将始终返回tru

  • 问题内容: 我是新来的人,我想做出反应并尝试使用内联样式获取背景图片。但这不起作用。 显示错误“ URL未定义” 问题答案: CSS值始终是字符串。将值用引号引起来,使其成为字符串:

  • 问题内容: 正如已经问过的:sort函数与函数一起在JavaScript中如何工作?如果我有一个数组,现在我在书中写道,如果函数返回(数组的两个索引),则它基于结果是否大于0,小于0或等于的事实工作0.但是,它到底如何工作?我无法解决。 问题答案: “比较”功能必须采用两个参数,通常称为 a 和 b 。然后,根据这些值 a 和 b 使比较函数返回0,大于0或小于0 。 如果 a* 大于 b, 则返

  • 问题内容: 我一直在阅读编程书,作者展示了一个类似的示例: 所以,我想知道为什么为什么等于假?如何比较这两个元组? 顺便说一句,这本书没有解释。 问题答案: 比较元组的位置:将第一元组的第一项与第二元组的第一项进行比较;如果它们不相等(即第一个大于或小于第二个),则这是比较的结果,否则将考虑第二个,然后是第三个,依此类推。 请参阅常见序列操作: 相同类型的序列也支持比较。特别是,通过比较相应的元素

  • 我有一个客户对象类,它有一些变量,并且已经实现了一个关于其中一个变量的比较器。然而,我需要为不同的变量last_name实现另一个比较器。 因为我的Customer类中不能有2个compareTo()方法,所以我决定在这里专门创建一个Comparing类 但一旦触及Collections.sort(客户); 它不会激活下面的公共int比较(Customer Customer_1,Customerc

  • 我有一个ArrayList,需要按降序排序。我用java来实现它。util。流动流动排序(比较器)方法。以下是根据Java API的描述: 返回由该流的元素组成的流,根据提供的