использовать выбор с React.memo против подключения - PullRequest
Новая
       33

использовать выбор с React.memo против подключения

0 голосов
/ 11 июня 2019

по ссылке.https://react -redux.js.org / next / api / hooks # performance

Я понимаю, что преимущество useSelector hook заключается в том, чтобы избежать wrapper hell . Обертка ада происходит из-за использования connect HOC .Если мы должны использовать React.memo HOC с useSelector по причине производительности, будет ли лучше использовать вместо него connect HOC ?Потому что в любом случае мы должны быть в адских фантиках .Если ад не на connect, то будет React.memo.

Любой, пожалуйста, объясните преимущество React.memo над connect.

1 Ответ

0 голосов
/ 12 июня 2019

Ну, во-первых, достаточно интересно, хотя React.memo является HOC, он не создает ту же вложенность, что и connect. Я создал тестовый код: 

import React from "react";
import ReactDOM from "react-dom";
import {connect, Provider} from 'react-redux'
import { createStore } from 'redux'
import "./styles.css";

const MemoComponent = React.memo(function MyMemo() {
  return <div>Memo</div>;
});

const ConnectedComponent = connect(null,null)(function MyConnected() {
  return <div>ReduxConnectComponent</div>;
})

const store = createStore(()=>{},{})


function App() {
  return (
    <Provider store={store}>
      <MemoComponent />
      <ConnectedComponent/>
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

А вот как выглядит структура:

enter image description here

Мы видим, что контент для подключения отображается глубже.

Во-вторых, в документах говорится:

по умолчанию useSelector () будет выполнять сравнение равенства ссылок выбранного значения при запуске функции селектора после отправки действия и будет вызывать повторный рендеринг компонента только в случае изменения выбранного значения. Однако, в отличие от connect (), useSelector () не предотвращает повторную визуализацию компонента из-за его родительской повторной визуализации, даже если реквизиты компонента не изменились.

это означает, что компонент, использующийSelector, не будет перерисован при изменении несвязанных частей магазина. И это самая важная часть оптимизации. Оптимизация с помощью React.memo или нет сейчас полностью зависит от вашего решения, и в большинстве случаев это просто не нужно. Мы используем React.memo только в тех случаях, когда компонент очень дорог в отображении.

Подводя итог, необходимо подключить упаковщик для подключения к магазину. С useSelector нам больше не нужно оборачиваться. Нам все еще нужно обернуть React.memo в тех редких случаях, когда нам нужно оптимизировать некоторые тяжелые компоненты. Работа React.memo также была выполнена с помощью connect, но в большинстве случаев это была преждевременная оптимизация.

...