我有一个包含多层子组件的表单。表单的状态保持在最高级别，我将函数作为 props 向下传递以更新顶层。唯一的问题是当表单变得非常大(您可以动态添加问题)时，每个组件都会在其中一个组件更新时重新加载。这是我的代码的简化版本(或 codesandbox:https://codesandbox.io/s/636xwz3rr):

const App = () => {
  return <Form />;
}

const initialForm = {
  id: 1,
  sections: [
    {
      ordinal: 1,
      name: "Section Number One",
      questions: [
        { ordinal: 1, text: "Who?", response: "" },
        { ordinal: 2, text: "What?", response: "" },
        { ordinal: 3, text: "Where?", response: "" }
      ]
    },
    {
      ordinal: 2,
      name: "Numero dos",
      questions: [
        { ordinal: 1, text: "Who?", response: "" },
        { ordinal: 2, text: "What?", response: "" },
        { ordinal: 3, text: "Where?", response: "" }
      ]
    }
  ]
};

const Form = () => {
  const [form, setForm] = useState(initialForm);

  const updateSection = (idx, value) => {
    const { sections } = form;
    sections[idx] = value;
    setForm({ ...form, sections });
  };

  return (
    <>
      {form.sections.map((section, idx) => (
        <Section
          key={section.ordinal}
          section={section}
          updateSection={value => updateSection(idx, value)}
        />
      ))}
    </>
  );
};

const Section = props => {
  const { section, updateSection } = props;

  const updateQuestion = (idx, value) => {
    const { questions } = section;
    questions[idx] = value;
    updateSection({ ...section, questions });
  };

  console.log(`Rendered section "${section.name}"`);

  return (
    <>
      <div style={{ fontSize: 18, fontWeight: "bold", margin: "24px 0" }}>
        Section name:
        <input
          type="text"
          value={section.name}
          onChange={e => updateSection({ ...section, name: e.target.value })}
        />
      </div>
      <div style={{ marginLeft: 36 }}>
        {section.questions.map((question, idx) => (
          <Question
            key={question.ordinal}
            question={question}
            updateQuestion={v => updateQuestion(idx, v)}
          />
        ))}
      </div>
    </>
  );
};

const Question = props => {
  const { question, updateQuestion } = props;

  console.log(`Rendered question #${question.ordinal}`);

  return (
    <>
      <div>{question.text}</div>
      <input
        type="text"
        value={question.response}
        onChange={e =>
          updateQuestion({ ...question, response: e.target.value })
        }
      />
    </>
  );
};

我试过使用 useMemo 和 useCallback，但我不知道如何让它发挥作用。问题是向下传递函数以更新其父项。如果不在每次表单更新时更新它，我不知道该怎么做。

我无法在任何地方在线找到解决方案。也许我正在寻找错误的东西。感谢您提供的任何帮助!

解决方案

使用 Andrii-Golubenko的回答和这篇文章React Optimizations with React.memo, useCallback, and useReducer我能够想出这个解决方案: https://codesandbox.io/s/myrjqrjm18

请注意控制台日志如何仅显示已更改组件的重新呈现。

最佳答案

1. 为功能组件使用 React 功能 React.memo to prevent re-render如果 props 没有改变，类似于类组件的 PureComponent。
2. 当你像那样传递回调时:

<Section
    ...
    updateSection={value => updateSection(idx, value)}
/>

你的组件 Section 将在每次父组件重新渲染时重新渲染，即使其他 Prop 没有改变并且你使用 React.memo 也是如此。因为您的回调将在每次父组件呈现时重新创建。您应该将回调包装在 useCallback Hook 中。

1. 如果您需要存储像initialForm 这样的复杂对象，使用useState 不是一个好的决定。最好使用useReducer;

在这里您可以看到有效的解决方案:https://codesandbox.io/s/o10p05m2vz

关于javascript - 防止功能 Prop 更新时重新渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56083493/