reactjs - react useMemo 重新渲染问题

Question

我试图使用 react-useMemo 来防止组件重新渲染。但不幸的是，它似乎没有解决任何问题，我开始怀疑我是否做错了什么

我的组件看起来像这样

function RowVal(props) {
  console.log('rendering');
  return (
    <Row toggleVals={props.toggleVals}>
      <StyledTableData centerCell>{props.num}</StyledTableData>
      <StyledTableData centerCell borderRight>
        {props.percentage}
      </StyledTableData>
    </Row>
  );
}

toggleVals 是一个 bool 值

num 是一个整数

百分比 Prop 是一个浮点值

为了防止重新渲染 - 我将以下内容添加到我的父组件中

function ChainRow(props) {
 const MemoizedRowVal = useMemo(
    () => (
      <RowVal
        num={props.num}
        percentage={props.percentage}
        toggleVals={props.toggleVals}
      />
    ),
    [props.toggleVals],
  );

  return (

   <div>{MemoizedRowVal}</div>
  )

}

但是尽管 bool 值没有变化，这个组件仍然会不断重新渲染。

有什么我做错了吗？

Answer 1

useMemo将阻止创建组件的新实例，并且如果 props 未更改，则不会阻止它重新渲染

我认为你需要的是使用 React.memo而不是 useMemo

function ChainRow(props) {

  return (

   <div>
      <RowVal
        num={props.num}
        percentage={props.percentage}
        toggleVals={props.toggleVals}
      />
    </div>
  )

}

const RowVal = React.memo((props) => {
   // rowVal code here
});

React.memo 还提供了第二个参数(areEqual)，您可以使用它对重新渲染进行更细粒度的控制