javascript - 从多个复杂子组件获取值的最佳方式？

Question

我有一个父组件，它有称为脚本的基本数据，它有多个序列，每个序列由多个项目(输入、下拉列表……)组成。

现在我需要在父级中更新数据，因为我想放置一个保存按钮，只需单击一下即可保存所有表单。

看起来像这样:

我尝试了两种处理方式:

• 每个 child 都有一个 onChange 属性 其中父级使用新数据设置状态。但是问题 这里是，因为这是一个相当复杂的形式，它重新呈现 每次都是所有内容，所以输入时会有明显的延迟 输入。
• 仅仅改变 child 的 Prop 对象的“坏处”， 这很快，但我知道这是一种不好的做法。

处理这种规模的表格的最佳方式是什么？是否应该进行不同的设置？

Answer 1

这是我花了一些时间与自己作斗争的问题。有多种方法可以在更高级别维护子状态；但是，我发现在您的特定情况下，通常最好使用 Redux。

明确地说，我通常不惜一切代价避免使用 Redux(支持 React 的上下文)，但 Redux 使您能够订阅子组件中的特定状态。当您只需要一个子组件更新时，监听子组件中的一个状态将阻止您的父组件和兄弟组件更新。在一次处理多个表单时，这最终会更有效率。

例如，下面的组件只会监听影响自身状态的状态更新。这些更新将绕过表单父组件和兄弟组件:

import React from 'react';
import { connect } from 'react-redux';
import * as actions from 'redux/actions';
// Custom component
import { InputField } from 'shared';

const FormOne = ({ me, actions }) => (
  <form>
    <InputField
      inputId="f1f1"
      label="field one"
      value={me.fieldOne}
      onChange={(e) => actions.setFormOneFieldOne(e.target.value)}
    />
    <InputField
      inputId="f1f2"
      label="field two"
      value={me.fieldTwo}
      onChange={(e) => actions.setFormOneFieldTwo(e.target.value)}
    />
    <InputField
      inputId="f1f3"
      label="field three"
      value={me.fieldThree}
      onChange={(e) => actions.setFormOneFieldThree(e.target.value)}
    />
  </form>
);

export default connect(state => ({ me: state.formOne }), actions)(FormOne);

在上面的例子中，FormOne 只监听它自己的状态更新；然而，使用上下文而不是 Redux 的类似逻辑将导致上下文提供者包装的整个组件树更新(包括父组件和兄弟组件):

import React, { useContext } from 'react';
// Custom component
import { InputField } from 'shared';
// Custom context - below component must be wrapped with the provider
import { FormContext } from 'context';


const FormTwo = () => {
  const context = useContext(FormContext);

  return(
    <form>
      <InputField
        inputId="f2f1"
        label="field one"
        value={context.state.formTwo.fieldOne}
        onChange={(e) => context.setFormTwoFieldOne(e.target.value)}
      />
      <InputField
        inputId="f2f2"
        label="field two"
        value={context.state.formTwo.fieldTwo}
        onChange={(e) => context.setFormTwoFieldTwo(e.target.value)}
      />
      <InputField
        inputId="f2f3"
        label="field three"
        value={context.state.formTwo.fieldThree}
        onChange={(e) => context.setFormTwoFieldThree(e.target.value)}
      />
    </form>
  );
};

export default FormTwo;

可以对上述两个组件进行一些改进，但它们旨在作为如何将子组件连接到提升状态的示例。也可以使用 props 连接到单个父组件，但这是最低效的选择，并且会使您的架构困惑。

要点:将 Redux 用于您的用例。如果实现得当，这是最有效的选择。

祝你好运!