React Components - 避免重新渲染

Question

刚想做出反应...我有一个组件，其中有一个状态数组。在渲染函数中，它将数组映射到一组渲染表单组件的子组件（通常为 selects）。如果用户更改了 select 之一，子项将调用 onChange，它运行一个处理程序以通过 useState() 提供的函数更新数组。问题 - 然后重新呈现每个子组件。有没有办法避免这种情况？ React.memo 似乎无济于事，因为同一个子组件的许多实例具有不同的属性。

大致：

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

})

React Components - 避免重新渲染

React Components - avoiding re-rendering

render

reactjs