Question

在处理大型数据时，关于性能，应该嵌套该状态，还是不嵌套状态？例如，考虑您是否有一个包含100个或更多字段的表单：

选项1

state = {
    formData: {
        formItem1: value,
        formItem2: value
    }
}

选项2

state = {
    formItem1: value,
    formItem2: value,
    formItem3: value
}

上面的第二个选项（不嵌套）-似乎会污染很多字段的状态。上面的第一个选项（嵌套）-我不确定在更新状态时这是否会导致大型表单的性能问题。例如，要更新上述选项1的状态：

this.setState({
    formData: {
        ...this.state.formData,
        formItem1: newValue
    }
});

因为这从技术上来说是为formData创建一个新对象-因为每个人的状态都已更新，所以所有表单字段都会经过重新渲染过程吗，从而导致巨大的表单出现性能问题吗？

Answer 1

您可以直接修改嵌套状态，但可以这样做，因此您也可以使用嵌套状态并使用第一个选项-

let temp = this.state.formData;
temp.formItem1 = newValue;
this.setState({formData:temp});

这将起作用

Answer 2

感谢官方docs的回应：

setState（）将始终导致重新渲染，除非shouldComponentUpdate（）返回false。如果正在使用可变对象，并且不能在shouldComponentUpdate（）中实现条件渲染逻辑，则仅当新状态不同于先前状态时调用setState（）才能避免不必要的重新渲染。

我建议仅在您的状态下存储依赖于重新呈现组件的那些formItem。您可以将所有其他formItem存储在变量中，并在必要时将其添加到组件状态。整个目的是避免不必要的重新渲染。