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

Question

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

这些行中的内容：

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

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

现在，我在每个单元格中都有状态（检查为是/否），因此速度更快。我真的不能使用将状态提升到父级原因的功能onChecked，然后又回到相同的慢速模式。

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

我当时想只是将所有数据保存在未链接到状态的变量中（在父级中，例如this.data），因为每个孩子都在处理自己的状态。

谢谢

Answer 1

如评论中所述，您应该为shouldComponentUpdate()组件实现Cell方法。像这样：

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才能使上述代码正常工作，或者实现自己的解决方案以序列化数组。