当从多个组件获取受控输入时,如何最大限度地提高React的性能



我创建了一个具有多个子组件的Parent组件。这些子组件中的每一个都有传递给父组件的数据,父组件将把这些数据发送给api调用。结构看起来像这个

const ParentComponent = () => {
const [child1input, setChild1Input] = useState("");
const [child2input, setChild2Input] = useState("");
const [child3input, setChild3Input] = useState("");
const [child4input, setChild4Input] = useState("");
const submitData = async () => {
const payload = {
input1: child1input,
input2: child2input,
input3: child3input,
input4: child4input
};
await axios.post('route', {...payload});
}
return (
<Fragment>
<Child1 input={child1input} setInput={setChild1Input} />
<Child2 input={child2input} setInput={setChild2Input} />
<Child3 input={child3input} setInput={setChild3Input} />
<Child4 input={child4input} setInput={setChild4Input} />
<Button onClick={submitData}>Submit</Button>
</Fragment>
);
};

现在很明显,每次每个组件更新父组件的状态(每次输入框的按键(时,它都会更新父组件,因此也会更新每个子组件。这会对性能产生巨大影响,并导致输入文本框的行为非常滞后。

我想知道,在不重新呈现所有内容的情况下,如何处理某个子组件中一个文本框的输入更改?

您可以将React.memo用于Child组件,将useCallback用于Parent一个

const handleInput1 = useCallback(
(e) => {
setChild1Input(e.target.value)
},[setChild1Input],
)
<Child1 input={child1input} setInput={handleInput1} />
------------------------------------------------------
export default React.memo(Child1);

相关内容

  • 没有找到相关文章

最新更新