React的功能setState如何确定哪些字段已更新？

Question

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

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

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

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

它将重新呈现依赖于s的任何字段的所有组件。因此，在我看来，它似乎仅查看闭包的返回对象引用是否与它已经具有的状态相同，并做出二进制选择是否重新呈现所有内容。

正确吗？

有没有一种方法可以使状态仅重新呈现依赖于诸如s.a？

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

Answer 1

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

这将触发重新渲染

Answer 2

[在开始之前，请注意，这不好，并且通常不起作用。将所有React状态/ props视为不可变的，否则会遇到问题。

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

无法选择性地重新呈现组件，setState上的突变不会重新呈现依赖于sa的子代的原因是，当您像这样进行更新时，您的组件根本不会重新呈现，因为s的引用未更改，因此react看不到有更改。

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

When does React re-render child component?