具有大量 children、parent 状态的 React 表单

Question

我有一个表单，基本上是一个复选框矩阵（数百个），并且有一个标题文本输入。

这些行中的内容：

render() {
    <form>
        <input type=text>title</input>
        {checkboxes.map(return <cell />)}
    </form>
}

之前，我将全局状态保存在 parent 中，但一次检查会花费很长时间，因为每个单元格都会触发渲染。

现在，我在每个单元格中都有状态（已选中 true/false），因此速度更快。我无法真正使用将状态提升到 parent 的函数 onChecked，因为然后我又回到相同的缓慢模式。

我的问题是：parent 应该如何保存全局状态（这样我就可以将它发送到服务器）？

我正在考虑将所有数据保存在一个变量中（在 parent 中，如 this.data）而不链接到状态，因为每个 children 都在处理自己的状态.

谢谢

Answer 1

如评论中所述，您应该对 Cell 组件实施 shouldComponentUpdate() 方法。类似于：

shouldComponentUpdate(nextProps) {
  if(nextProps.checked === this.props.checked) {
    return false;
  }

  return true;
}

这将确保如果 checked 道具自上次重新渲染后没有更改，则永远不会发生重新渲染。您现在应该能够在没有任何滞后的情况下将状态保留在父级中。

或者，但不推荐，您可以保留每个组件的状态并向您的 <form> 添加一个 ref。这允许您使用一些表单和表单元素特有的辅助方法。

这可能看起来像：

<form ref={el => this.formRef = el}>
  ...

和

onSubmitToServer() {
  const data = jQuery(this.formRef).serializeArray();
  //do something
}

显然，您需要安装并导入 jQuery 才能使上述工作正常，或者实施您自己的序列化数组解决方案。

React form with lot of children, parent state