0

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

这些行中的一些东西：

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

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

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

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

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

谢谢

4

1 回答 1

2

如评论中所述，您应该将该shouldComponentUpdate()方法实现到您的Cell组件中。就像是：

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

  return true;
}

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

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

这可能看起来像：

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

和

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

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

于 2018-06-20T10:01:32.730 回答