为什么React.memo和shouldComponentUpdate没有做同样的事情？

Question

i具有一个功能组件，该功能组件与我的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对象更改，则该组件不会重新渲染，但是确实如此。

当我将组件重写为类组件并添加showsComponemuptate时，将根据预期的预期进行重新渲染。如下：

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

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

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

Answer 1

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