防止在功能道具更新时重新呈现

Question

我有一个包含几层子组件的表单。表单的状态保持在最高级别，而我向下传递了作为更新最高级别的道具的函数。唯一的问题是，当表单变得很大（您可以动态添加问题）时，每个单个组件都会在其中一个更新时重新加载。这是我的代码的简化版本（或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>    </>  );};我已经尝试过使用useMemo和useCallback，但是我不知道如何使它工作。问题是传递函数以更新其父级。我无法弄清楚如何在每次表单更新时不对其进行更新。我无法在任何地方在线找到解决方案。也许我在寻找错误的东西。感谢您提供的任何帮助！

Answer 1

通过使用复杂的表单解决此问题，我实现的技巧是onBlur={updateFormState}通过组件的prop传递给组件的输入元素上触发将表单数据从组件提升到父表单。

为了更新组件的输入要素，我onChange={handleInput}使用了组件内部的状态，然后当输入（或组件作为一个整体，如果组件中有多个输入字段）失去焦点时，通过提升功能将组件状态传递给组件。

这有点hacky，并且由于某种原因可能是错误的，但是它在我的机器上可以工作。;-)