React 中对象不变性的开销答案

【问题标题】：Overhead of object immutability in ReactReact 中对象不变性的开销
【发布时间】：2020-12-02 18:55:12
【问题描述】：

我有一个包含很多字段和一些附件的表单。我正在使用 React 钩子 useState 来设置表单数据。在 React 中，我不应该直接改变状态，所以当输入触发更改事件时，我需要制作对象的副本，然后使用 setState。

我注意到当我的状态对象很大并且嵌套时 setState 很慢。特别是当状态对象包含附件时，像下面这样复制对象也会复制附件中的所有字节。这会使页面变得非常缓慢且无响应。

钩子：

 const [requestViewModel, setRequestViewModel] = useState<RequestViewModel>({
            id: 0,
            contacts: [] as UserRequestRole[],   
            attachments: [] as RequestAttachment[],
            ..other fields
        });

这很慢：

 setRequestViewModel({ ...requestViewModel, [name]: value });

如何以更少的开销复制对象？

【问题讨论】：

拥有更少的对象。更扁平、更小的物体 = 更少的开销。

标签： javascript reactjs ecmascript-6

【解决方案1】：

是的，它会很慢。以下是对该问题的一个很好的总结：https://stackoverflow.com/a/57102754/7082724

您可能想要扁平化/简化您的状态，或使用多个 useState 调用，或者您可能想要切换到使用 useReducer。

【讨论】：