编辑大量内容的大型（ish）应用程序

Question

我正在开发一个包含许多输入的应用程序，这些输入都是一个大型数据树的一部分。

数据与此类似：

sectionHeaderList

每个输入组件接收 - 作为支柱 - 它应该显示的数据位置的键 并修改（data: { input_1: "Text", input_2: "etc", ... input_n: "foo" } ）。

有一些验证发生在组件本身内部，但基本上<InputComponent data={data['input_1']} objectKey={'input_1'} onChange={this.updateData} />被去抖动并被调用 更改文本时。

我以类似的方式处理onChange：

this.onChange

我在注意更新条目时会注意到一些减速和延迟行为。这是 - 至少据我所知 - 至少 每个组件都是＆＃34;钩入＆＃34;这些数据正在重新渲染。

这是一种愚蠢的做法吗？如果是这样，那会更好一点？ 还不错，但我预计情况会变得更糟 因为它的大小/复杂性增加了。

Answer 1

这是我的方法，任何批评都是受欢迎的，因为我也在寻找一个更好的方式来解决我的类似问题。

我会将InputComponent设为PureComponent，其内部状态为当前输入值。 PureComponent会自动与您的state进行浅层比较。如果InputComponent更复杂且state由数组或深层对象组成，则应自行手动实施shouldComponentUpdate。

onChange只会更新其内部状态，然后debounce来电props.onChange

onChange(val) {
  this.setState(val);
  debounce(this.props.onChange(val));
}

通过这种方式，更新看起来更顺畅，之后，父级的值也会相应更新，而无需重新渲染和更新子级InputComponent。