首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >浅层比较在react中是如何工作的

浅层比较在react中是如何工作的
EN

Stack Overflow用户
提问于 2016-03-18 20:33:12
回答 10查看 88.4K关注 0票数 114

在React的this documentation中,据说

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

我不能理解的是,如果它简单地比较对象,那么shouldComponentUpdate方法将始终返回true,因为

我们不应该改变状态。

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

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2016-03-18 20:51:50

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

让我们考虑一下user对象的以下形状

代码语言:javascript
复制
user = {
  name: "John",
  surname: "Doe"
}

示例1:

代码语言:javascript
复制
const user = this.state.user;
user.name = "Jane";

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

请注意,您更改了用户名。即使做了这样的更改,对象也是相等的。引用是完全相同的。

示例2:

代码语言:javascript
复制
const user = clone(this.state.user);
console.log(user === this.state.user); // false

现在,如果不对对象属性进行任何更改,它们就完全不同了。通过克隆原始对象,可以创建具有不同引用的新副本。

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

代码语言:javascript
复制
const clone = obj => Object.assign({}, ...obj);

浅层比较是检测更改的有效方法。它希望你不要改变数据。

票数 155
EN

Stack Overflow用户

发布于 2018-07-15 05:40:57

浅层比较是指使用"===“或严格相等来完成被比较对象的属性,并且不会对属性进行更深入的比较。例如

代码语言:javascript
复制
// a simple implementation of the shallowCompare.
// only compares the first level properties and hence shallow.
// state updates(theoretically) if this function returns true.
function shallowCompare(newObj, prevObj){
    for (key in newObj){
        if(newObj[key] !== prevObj[key]) return true;
    }
    return false;
}
// 
var game_item = {
    game: "football",
    first_world_cup: "1930",
    teams: {
         North_America: 1,
         South_America: 4,
         Europe: 8 
    }
}
// Case 1:
// if this be the object passed to setState
var updated_game_item1 = {
    game: "football",
    first_world_cup: "1930",
    teams: {
         North_America: 1,
         South_America: 4,
         Europe: 8 
    }
}
shallowCompare(updated_game_item1, game_item); // true - meaning the state
                                               // will update.

尽管这两个对象看起来是相同的,但game_item.teamsupdated_game_item.teams并不是相同的引用。为了使两个对象相同,它们应该指向相同的对象。因此,这会导致被评估的状态被更新

代码语言:javascript
复制
// Case 2:
// if this be the object passed to setState
var updated_game_item2 = {
    game: "football",
    first_world_cup: "1930",
    teams: game_item.teams
}
shallowCompare(updated_game_item2, game_item); // false - meaning the state
                                               // will not update.

这一次,对于严格比较,每个属性都返回true,因为新旧对象中的team属性指向同一个对象。

代码语言:javascript
复制
// Case 3:
// if this be the object passed to setState
var updated_game_item3 = {
    first_world_cup: 1930
}
shallowCompare(updated_game_item3, game_item); // true - will update

updated_game_item3.first_world_cup属性未通过严格计算,因为1930是一个数字,而game_item.first_world_cup是一个字符串。如果比较是宽松的(==),这就可以通过了。尽管如此,这也将导致状态更新。

其他注意事项:

  1. 执行深度比较是没有意义的,因为如果状态对象是深度嵌套的,则会显著影响性能。但是如果它不是太嵌套的,并且你仍然需要深入的比较,那么在shouldComponentUpdate中实现它,并检查这是否足够。
  2. 你绝对可以直接改变状态对象,但是组件的状态不会受到影响,因为它在setState方法流中,react实现了组件更新周期钩子。如果您直接更新状态对象以故意避免组件生命周期挂钩,那么您可能应该使用简单的变量或对象来存储数据,而不是状态对象。
票数 47
EN

Stack Overflow用户

发布于 2018-11-06 17:40:26

浅层比较的工作原理是检查两个值是否相等,在基本类型为的情况下,如string,numbers和,在object的情况下,它只检查引用。因此,如果你浅层比较一个深度嵌套的对象,它将只检查引用,而不是该对象内部的值。

票数 37
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36084515

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档