Question

我有一个功能组件，该组件与Redux存储中的对象有连接。为了避免在对象更改后重新渲染，我添加了React.memo，但这并不能避免重新渲染。我的备忘录如下所示：

const MemoizedRadio = React.memo(Radio, (prevProps, nextProps) => {
  if (prevProps.selected !== nextProps.selected) {
    return false;
  }
  return true;
});

const mapStateToProps = state => ({
  nodes: state.canvas.elements.nodes
});

export default connect(mapStateToProps)(MemoizedRadio);

如果nodes对象已更改，我希望此组件不会重新呈现，但是确实如此。

当我将组件重写为类组件并添加shouldComponentUpdate时，将无法按预期进行重新渲染。 shouldComponentUpdate如下所示：

shouldComponentUpdate(nextProps) {
    if (this.props.selected !== nextProps.selected) {
      return true;
    }
    return false;
  }

我认为React.memo的行为与shouldComponentUpdate相同，但事实并非如此。当对React.memo对象的引用发生更改时，nodes实现总是重新渲染，而shouldComponentUpdate实现则阻止按预期进行重新渲染。

有人可以解释这种行为吗？

Answer 1

您正确使用了React.memo，问题是您正在使用connect HOC将基于类的组件连接到商店。代替使用HOC，您应该使用useDispatch和useSelector

为什么React.memo和shouldComponentUpdate不做相同的事情？

1 个答案: