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

Question

我创建了一个包含多个子组件的父组件。这些子组件中的每一个都有向下传递到父组件的数据，父组件会将这些数据发送到 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>
  );
};

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

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

Answer 1

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

const handleInput1 = useCallback(
    (e) => {
        setChild1Input(e.target.value)
    },[setChild1Input],
)
<Child1 input={child1input} setInput={handleInput1} />

------------------------------------------------------

export default React.memo(Child1);

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

How to maximize performance in React when taking controlled input from multiple components?

javascript

performance

web-frontend

reactjs

react-hooks