Почему React.memo и shouldComponentUpdate не делают то же самое? - PullRequest
Новая
       18

Почему React.memo и shouldComponentUpdate не делают то же самое?

2 голосов
/ 08 июля 2019

У меня есть функциональный компонент, который имеет связь с объектом в моем магазине 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 предотвращает повторную визуализацию, как ожидалось.

Кто-нибудь может объяснить это поведение?

1 Ответ

1 голос
/ 08 июля 2019

Вы используете React.memo правильно, проблема в том, что вы используете connect HOC для подключения компонентов на основе классов к хранилищу. Вместо использования HOC вы должны использовать useDispatch и useSelector

...