时间戳

首页 > 解决方案 > React Components - 避免重新渲染

reactjs - React Components - 避免重新渲染

问题描述

新的反应......我有一个状态为数组的组件。在渲染函数中，它将数组映射到一组渲染表单组件（通常是选择）的子组件。如果用户更改了其中一个选择，则子进程调用 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}>
      )
    }
  )
}

标签： reactjsrender

解决方案

为了防止重新渲染，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

})

推荐阅读