Reactjs 大型窗体的嵌套状态

在处理大型表单数据时，在性能方面，该状态是嵌套的，还是不嵌套的？例如，如果您有一个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创建一个新对象——在每个表单字段的状态都已更新之后，是否所有表单字段都会经历重新渲染过程——从而导致大型表单的性能问题

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

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

这将起作用

感谢react官方：

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

我建议只在您所在的州存储那些可以可靠地重新渲染组件的FormItem。您可以将所有其他FormItem存储在变量中，并在必要时将它们添加到组件状态中。整个目的是避免不必要的重新渲染

• 有时，更改的状态与渲染相关，但并非在所有情况下都相关。例如，当某些数据仅在条件下可见时

---

您不需要扩展到当前状态，只需在setState中指定要更改的内容即可。React将自动将更改的状态与其余状态合并。我的建议是：“过早的优化是万恶之源”，只要用你觉得更好的方法去尝试，当你遇到问题时，你可以在以后优化它。不要想太多为了消除不必要的渲染，你可以使用

shouldComponentUpdate

回调。