将大型对象从孩子传递给家长的最佳方式？

Question

我有一个巨大的表单，sumbit是从表单外部触发的

<App>
   <Form/>
   <Button/>   
</App>

问题是，我需要有当前表单字段对象在按钮组件。我试图通过传递setState函数来传递多个层的状态：

const [formFields, setFormFields] = useState(null);    
<App>
   <Form setData={setFormFields}/>
   <Button data={formFields}/>   
</App>

还可以使用redux分派（在表单字段更改时）和按钮组件中的Selector来获取当前数据。但当我在输入字段中编写一些文本时，这两种方法似乎都会减慢应用程序的速度。

优化it的最佳解决方案是什么？

Answer 1

当我在输入字段中编写一些文本时，会使应用程序的速度减慢。

这是因为您将表单的数据绑定到呈现。也可以通过Redux存储整个表单（或者您想要的任何其他地方），只要您没有在组件的呈现生命周期和表单字段值中的那些突变之间创建依赖关系。

整个表单是否需要更新每个单独组件的事件？不是真的。然而，由于整个窗体聚集在一个大对象中，并且该对象的引用在更新后更改，因此整个组件树被重新渲染。

为了减少重新呈现的需要，您可以在React之外同步数据（注意：数据，而不是验证等），并且仅在提交时获取数据。

import React, { useState } from "react";

const externalFormData = {};

function Form() {
  return (
    <input
      onChange={function(ev) {
        externalFormData.input = ev.target.value;
      }}
    />
  );
}

export default function App() {
  const [formData, setFormData] = useState();
  return (
    <div>
      <Form />
      <input
        type={"button"}
        onClick={function() {
          setFormData(externalFormData);
        }}
        value="Submit form"
      />
      <p>{`Submitted form is: ${JSON.stringify(formData)}`}</p>
    </div>
  );
}

如果这是您的选择，我建议您寻找一些现有的表单库来为您处理（包括验证等）。

另一个想法是将你提到的这个“大对象”解耦为单独更新的单个对象，因此只触发受值影响的组件的重新渲染。