我正在开发一个包含许多输入的应用程序,这些输入都是一个大型数据树的一部分。
数据看起来类似于:
data: {
input_1: "Text",
input_2: "etc",
...
input_n: "foo"
}
每个输入组件都接收 - 作为 prop - 它应该显示的数据位置的键
并修改 ( <InputComponent data={data['input_1']} objectKey={'input_1'} onChange={this.updateData} />
)。
有一些验证发生在组件本身内部,但基本上是 this.onChange
被去抖动并被称为
更改文本时。
我正在以与此类似的方式处理 onChange:
onChange = (newInput, objectKey) => {
const {data} = this.state;
const newData = {
...data,
[objectKey]: newInput
};
this.setState({
data: newData
});
};
我注意到更新条目时出现了一些速度变慢和滞后的行为。这是——至少据我所知——因为 “连接到”此数据的每个组件都将重新呈现。
这是一种愚蠢的做法吗?如果是这样,什么会更好?还没有那么糟糕,但我预计情况会变得更糟 随着它的大小/复杂性增加。
最佳答案
这是我的方法,欢迎任何批评,因为我也在为我的具有类似问题的应用程序寻找更好的方法。
我会将 InputComponent
作为一个 PureComponent
,为当前输入值设置一个内部状态。 PureComponent
将自动对您的state
进行浅比较。如果您的 InputComponent
更复杂,state
由数组或深层对象组成,您应该自己手动实现 shouldComponentUpdate
。
onChange
会简单地更新其内部状态,然后debounce
调用 props.onChange
onChange(val) {
this.setState(val);
debounce(this.props.onChange(val));
}
通过这种方式,更新看起来更顺畅,之后父级的值也相应地更新,而无需重新渲染和更新子级 InputComponent
。
关于javascript - 编辑大量内容的大型(大概)应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46078171/