我正在开发一个包含许多输入的应用程序,这些输入都是一个大型数据树的一部分。
数据与此类似:
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;这些数据正在重新渲染。
这是一种愚蠢的做法吗?如果是这样,那会更好一点? 还不错,但我预计情况会变得更糟 因为它的大小/复杂性增加了。
答案 0 :(得分:1)
这是我的方法,任何批评都是受欢迎的,因为我也在寻找一个更好的方式来解决我的类似问题。
我会将InputComponent
设为PureComponent
,其内部状态为当前输入值。 PureComponent
会自动与您的state
进行浅层比较。如果InputComponent
更复杂且state
由数组或深层对象组成,则应自行手动实施shouldComponentUpdate
。
onChange
只会更新其内部状态,然后debounce
来电props.onChange
onChange(val) {
this.setState(val);
debounce(this.props.onChange(val));
}
通过这种方式,更新看起来更顺畅,之后,父级的值也会相应更新,而无需重新渲染和更新子级InputComponent
。