仅重新渲染特定的孩子

Question

我正在构建一个动态表单，到目前为止，我的组件层次结构如下：-

App
  Caseform
    DynamicFormBuilder
      Context.Provider
        Patients
          Patient key = "patient_1"
            ComponentCreator key = "patient_1_1"
              Textbox
            ComponentCreator key = "patient_1_2"
              Textbox
            ComponentCreator key = "patient_1_3"
              Textbox
          Patient key = "patient_2"
            ComponentCreator key = "patient_2_1"
              Textbox
            ComponentCreator key = "patient_2_2"
              Textbox
            ComponentCreator key = "patient_2_3"
              Textbox

到目前为止，我已经在 caseform 中硬编码 JSON 数据，但最终它将来自 fetch 调用。一旦 DynamicFormBuilder 收到 caseform 元数据，它就会从中创建状态。

即使对于它的孩子，我也将状态保持在案例级别。我想这样做是因为要求是支持补丁保存（在保存按钮按下时仅将更改的数据发送到后端）。如果有人知道更好的方法，请告诉我。

我正在使用上下文 API 将一个函数传递给子组件，以便它们可以更新 DynamicFormBuiler 中的状态。

我面临的问题是，假设即使用户编辑了一个文本框，整个动态表单也会被渲染。

我在 StackOverflow 上查看了很多关于使用 shouldComponentUpdate 生命周期方法的建议，但我无法弄清楚我将如何在这里使用它。

我正在添加一个指向沙盒的链接，在控制台中，您可以看到如果用户编辑一个字段，所有内容都会再次呈现。

CodeSandbox Link

预期行为：- 我正在寻找的是例如：- 如果用户编辑只有一个文本框在患者 1 中说，那么只有该文本框会再次重新渲染

这是我第一次使用 react。如果有人觉得我没有做足够的研究，我提前道歉，我已经阅读了很多问题但仍然面临一些挑战，任何帮助将不胜感激。

Answer 1

如果您将每个组件包装在 React.memo() HOC 中，这应该可以防止过度重新渲染。

https://reactjs.org/docs/react-api.html#reactmemo

-编辑-

是的，它也适用于类组件。

例如

const MyComponent = React.memo(class extends React.Component {
  render () {
    return <h1>TEST</h1>
  }
});