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 回答