React Components - 避免重新渲染

Question

新的反应...我有一个组件，它有一个处于状态的数组。在渲染函数中，它将数组映射到一组渲染表单组件（通常是选择）的子组件。如果用户更改了其中一个选择，则子进程调用 onChange，它运行一个处理程序以通过 useState() 提供的函数更新数组。问题 - 然后重新渲染每个子组件。有没有办法避免这种情况？ React.memo 似乎没有帮助，因为同一个 Child 组件的许多实例具有不同的 props。

大概：

function Parent() {
  const [ arr, setArr] = useState( <some big array> );

  let handleChange = e => {
    // logic to figure out what needs to be updated
    setArr(<new array>);
  }

  return (
    {
      arr.map( (el, i) =>
        <Child prop1={el} onChange={handleChange}>
      )
    }
  )
}

Answer 1

为了防止重新渲染，React.memo 是正确的方法，但是您需要记住 handleChange 函数，否则在重新渲染期间每个子组件将引用一个 onChange 函数，该函数不同于之前的重新渲染，因此无法停止重新渲染

function Parent() {
  const [ arr, setArr] = useState( <some big array> );

  let handleChange = useCallback(e => {
    // logic to figure out what needs to be updated
    setArr(<new array>);
    // Use functional callback to update state instead of taking it from closure
  }, []); 

  return (
    {
      arr.map( (el, i) =>
        <Child prop1={el} onChange={handleChange}>
      )
    }
  )
}

const Child = React.memo((props) => {
   // Child component logic

})