从多个组件获取受控输入时如何在React中最大化性能？

Posted 2021-04-19

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