React 的函数式 setState 如何确定哪些字段已更新？答案

【问题标题】：How does React's functional setState determine which fields have been updated?React 的函数式 setState 如何确定哪些字段已更新？
【发布时间】：2020-08-14 23:50:17
【问题描述】：

根据我的实验，如果您有一个对象作为反应状态 (let [state, setState] = useState({}))，并且您执行类似的操作

setState(s => {
    s.a = 42;
    return s;
})

它不会重新渲染依赖于s.a 的组件。另一方面，如果你这样做了

setState(s => {...s, a: 42});

它将重新渲染依赖于 s 的任何字段的所有组件。所以在我看来，它真的只看闭包的返回对象引用是否与它已经拥有的状态相同，并做出二元选择是否重新渲染所有内容。

对吗？

有什么方法可以更新状态，使其仅重新渲染依赖于例如的事物。 s.a?

上下文，如果有帮助的话：我的应用程序需要这个，因为性能变得不切实际。我的应用程序从 API 端点检索 JSON 信息，其中包含描述用户可用于输入数据的输入字段的“字段”列表。用户完成后，应用程序以单个 json 格式提交此数据。因此，所有输入组件都是通过一个单一的功能状态来控制的，该状态为每个字段保存一个属性（有时我需要能够以编程方式更新某些字段）。性能令人望而却步，因为每次用户在其中一个中键入字符时，所有字段（现在很多）都会更新/重新渲染。很遗憾，我无法为每个字段创建新状态，因为事先不知道字段的数量。

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

作为我开始之前的一个说明，这是不行的，而且通常不起作用。将所有 React 状态/道具视为不可变的，否则您将遇到问题。

setState(s => {
    s.a = 42;
    return s;
})

没有办法选择性地重新渲染您的组件，setState 上的突变不会重新渲染依赖 sa 的子组件的原因是，当您像这样更新时，您的组件根本不会重新渲染因为 s 的引用没有变化，所以 react 没有看到有变化。

当父母重新渲染时，让孩子不重新渲染的唯一方法是使用 React.memo、PureComponent 或 shouldComponentUpdate。这些必须应用于孩子而不是父母。

When does React re-render child component?

【讨论】：