Question

我有一个父组件，该组件具有称为脚本的基础数据，该脚本具有多个序列，每个序列由多个项目（输入，下拉列表，...）组成。

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

它看起来像这样：

我尝试了两种处理方式：

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

按这样的规模处理表格的最佳方法是什么？应该设置不同吗？

Answer 1

提升状态确实是做到这一点的正确方法。要优化子部分，您可以使用

PureComponent ==> https://reactjs.org/docs/react-api.html#reactpurecomponent

又名记忆成分==> https://reactjs.org/docs/react-api.html#reactmemo

React.memo是一个高阶组件。它类似于React.PureComponent，但用于功能组件而不是类。

此外，如果您在hooks Universe检出中

useCallback：https://reactjs.org/docs/hooks-reference.html#usecallback

useMemo：https://reactjs.org/docs/hooks-reference.html#usememo

如果您有机会使用Redux，请记住看看

重新选择：https://github.com/reduxjs/reselect

Answer 2

将所有表单包装在一个组件中，该组件仅处理保存所有表单数据并运行“全部保存”功能：

包装器组件应具有包含所有表单数据的状态，它可能看起来应像这样：

class Wrapper Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formsData: {},
    };
  }
}

formsData的结构可能应该非常像这样： {0：{标题：“文本”，类型：“视频”，等等：“等”}， 1：{标题：“文本”，类型：“视频”，等等：“等”}} 键（0、1等）代表表单ID，并且可以设置为每个键具有的任何唯一修饰符。

然后让包装器组件为每个单独的表单处理onChange->每个单独的表单上的每个更改都应提升新状态（新的更新数据）并相应地更新formsData状态obj：

const onChange(formData) {
   const formattedData = {[formData.id]: {...formData}}
   this.setState({formsData: {...formsData, ...formattedData}})
}

*这只是一个例子，其中在每种形式的每次更改中，您抬高整个数据对象时，您都可以通过多种方式做到这一点

然后，保存所有按钮也应该在包装器组件中处理，并将与它一起存储的所有数据提升到父组件中的相关函数/自己处理。

祝你好运！

Answer 3

这是我花了一些时间与自己奋斗的问题。有多种方法可以将孩子的状态保持在较高的水平。但是，我发现在您的特定情况下，通常最好使用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用于您的用例。如果正确实施，这是最有效的选择。

祝你好运！

从多个复杂的子组件中获取价值的最佳方法？

3 个答案: