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 是一个布尔值
• num 是一个整数
• 百分比属性是一个浮点值

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

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

  return (

   <div>{MemoizedRowVal}</div>
  )

}

但尽管布尔值没有变化，该组件仍然不断重新渲染。

我做错了什么吗？

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），您可以使用它对重新渲染进行更细粒度的控制