编辑大量内容的大型(ish)应用程序

时间:2017-09-06 14:42:40

标签: javascript reactjs redux

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

数据与此类似:

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;这些数据正在重新渲染。

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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

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