当我只在特定的子对象中进行更改时，如何避免在其他子对象中不必要的重新渲染

Question

在我的react项目中

我有三个组件

其中一个叫做BigForm另外两种被称为表格A和表格B。

在BigForm中，有两个状态，DataA和DataB，它们将被传递到FormA和FormB中。

问题：每当我将输入值添加到Form A或Form B中时，它也会触发其他组件上不必要的渲染。

我该如何避免？示例代码将不胜感激。(在尝试之前也请查看我的编辑(谢谢；我听说redux可能会有所帮助，但我不确定如何在这个例子中实现这一点

import React, {useState, useEffect} from "react";
const FormA = (props) => {
useEffect(()=>{ console.log('Form A was just rendered')})
const { dataA, setDataA } = props;
return (
<div>
<input onChange={(e) => setDataA(e.target.value)}></input>
<p>Input Form A{dataA}</p>
</div>
);
};
const FormB = (props) => {
const { dataB, setDataB } = props;
useEffect(()=>{ console.log('Form B was just rendered')})
return (
<div>
<input onChange={(e) => setDataB(e.target.value)}></input>
<p>Input Form B{dataB}</p>
</div>
);
};
export function BigForm (props) {
const [dataA,setDataA] = useState()
const [dataB,setDataB] = useState()

return (
<div className="App">
<FormA dataA={dataA} setDataA={setDataA}></FormA>
<FormB dataB={dataB} setDataB={setDataB}></FormB>

</div>
);
}

编辑：

出于某种原因，我打算将状态设置为parent，而不是让孩子保持自己的状态，因为最后，我需要将所有其他形式的数据汇总用于其他目的。

.备忘录不是我想要的，因为在我的真实例子中，它不起作用，因为还有其他复杂因素阻碍了它的工作。

Answer 1

React中有几种方法可以优化重新渲染。第一种方法是shouldComponentUpdate((。这是React在重新渲染组件之前调用的一个函数。如果shouldComponentUpdate((返回false，则不会重新渲染该组件。

优化React组件的第二种方法是使用PureComponent。PureComponent是一个类似于component的React组件，但它实现了shouldComponentUpdate((，并对props和state进行了简单的比较。这意味着，如果两个值为===，则PureComponent将不会重新渲染组件。

优化React组件的第三种方法是使用React。memory((。React.memo((是一个更高阶的组件，它允许您对组件的结果进行记忆，这样，除非道具或状态发生变化，否则就不必重新渲染。