javascript - 编辑大量内容的大型(大概)应用程序

Question

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

数据看起来类似于:

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
  });
};

我注意到更新条目时出现了一些速度变慢和滞后的行为。这是——至少据我所知——因为“连接到”此数据的每个组件都将重新呈现。

这是一种愚蠢的做法吗？如果是这样，什么会更好？还没有那么糟糕，但我预计情况会变得更糟随着它的大小/复杂性增加。

Answer 1

这是我的方法，欢迎任何批评，因为我也在为我的具有类似问题的应用程序寻找更好的方法。

我会将 InputComponent 作为一个 PureComponent，为当前输入值设置一个内部状态。 PureComponent 将自动对您的state 进行浅比较。如果您的 InputComponent 更复杂，state 由数组或深层对象组成，您应该自己手动实现 shouldComponentUpdate。

onChange 会简单地更新其内部状态，然后debounce 调用 props.onChange

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

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