与很多孩子，父母状态反应形式

Question

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

这些行中的一些东西：

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

之前，我将全局状态保存在父级中，但是单次检查需要很长时间，因为每个单元格都会触发渲染。

现在，我在每个单元格中都有状态（检查真/假），所以速度更快。我不能真正使用函数onChecked 将状态提升到父级原因，然后我会回到相同的缓慢模式。

我的问题是：父级应该如何保存全局状态（例如，我可以将其发送到服务器）？

我正在考虑将所有数据保存在与状态无关的变量（在父级中，例如 this.data）中，因为每个子级都在处理自己的状态。

谢谢

Answer 1

如 cmets 中所述，您应该为您的 Cell 组件实现 shouldComponentUpdate() 方法。比如：

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

  return true;
}

这将确保如果 checked 属性自上次重新渲染后没有更改，则永远不会发生重新渲染。您现在应该能够将状态保持在父级中而没有任何延迟。

---

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

这可能看起来像：

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

和

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

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