我是否需要对唯一发生更改的属性设置 State？

Question

假设我有一个 Person 类：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

然后我在状态中实例化一个 Person 对象：

export default class SomeComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      cena: new Person('John Cena', 40)
    }
  }

  render() {
    const { name, age } = this.state.cena;
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    )
  }
}

假设我们有一个按钮可以将塞纳的年龄加一。尽管我们只需要更改年龄，但使用全新的 Person 对象设置状态是否安全？

this.setState(prevState => ({
  cena: new Person(prevState.cena.name, prevState.cena.age + 1)
}));

我确实用 Chrome 的油漆闪烁工具对此进行了测试。当我设置this.state.cena一个年龄增加的全新人员时，只有年龄段落被重新绘制，名称段落保持不变。

不过，我还是有点担心。我应该依靠 React 来处理高效的浅层比较，还是应该手动更改需要更改的内容？

我什至不知道如何才能实现这一目标。如果我只尝试setState年龄，我仍然需要做类似的事情：

this.setState(prevState => ({
  cena: { ...prevState, age: prevState.age + 1 }
}));

这与通过构造函数创建一个新的 Person 完全相同。为了“有效”地仅更新年龄，我必须将 Person 传播到状态的第一级。

constructor() {
  super();
  this.state = {
    ...new Person('John Cena', 40)
  }
}

这很糟糕，因为我稍后可能需要创建另一个人。

所以，我将重新表述我的问题：我应该 setState 一个全新的对象并依靠 React 来处理浅层比较吗？

Answer 1

我应该依靠 React 来处理高效的浅层比较，还是应该手动更改需要更改的内容？

无论您传递给 setState 的是什么，都会与当前状态合并。合并后，如果状态发生变化，React 将重新渲染使用该状态的组件。

您的所有三个示例在功能上都是相同的，您应该使用您认为最具可读性的一个。

一般来说，您可以相信它的性能非常好。您还可以在适当的情况下通过使用 PureComponent 和/或功能组件来提高性能。