浅比较工作中如何反应

Question

在React的这篇文档中，据说

shallowCompare对current props和nextProps对象以及current state和nextState对象执行浅层相等性检查。

我无法理解的是，如果它简单地比较了对象，那么componentupdate方法应该总是返回true，就像

如果我们没有改变状态，那么比较将始终返回false，因此shouldComponent更新将始终返回true。我很困惑它是如何工作的，以及我们将如何克服这一点来提高性能。

Answer 1

浅比较检查是否相等。当比较标量值（数字、字符串）时，它会比较它们的值。当比较对象时，它不比较它们的属性--只比较它们的引用（例如，“它们指向同一个对象吗？”）。

让我们考虑以下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);

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