производительность: подключение к хранилищу Redux против передачи данных через реквизит

Question

Я использую хранилище резервов для всех своих основных компонентов, но для небольших компонентов я просто передавал обычные реактивные реквизиты. Что является более эффективным?

Если есть много более мелких компонентов, имеет ли какое-то значение то, что они вытягивают из редукса или переходят в обычный реквизит?

Документы Redux говорят:

многие отдельные компоненты должны быть подключены к магазину вместо нескольких

Это Похоже, я должен подключать даже мои меньшие (иногда очень крошечные) компоненты тоже. В настоящее время я использую магазин во многих, но не во всех компонентах.

Answer 1

connect более мелкие компоненты более производительны, потому что при изменении состояния Redux только затронутые компоненты будут перерисовываться. Передача регулярных реквизитов React менее эффективна, поскольку при изменении состояния это изменение передается через множество вложенных компонентов вплоть до небольшого компонента, в результате чего все эти компоненты перерисовываются.

Хотя подключение небольших компонентов более производительно, оно приходит с некоторыми недостатками, описанными в этого ответа . Подводя итог, можно сказать, что подключение компонента связывает его с состоянием Redux. Таким образом, компонент должен быть протестирован с хранилищем, и компонент не может быть модульным, если реализация хранилища не идет с ним. Решение этой проблемы состоит в том, чтобы отделить логику состояния c компонента от его логи состояния c.

const StatefulTodo = ({ id }) => {
  const todo = useSelector(state => getTodo(state, {id});

  return <StatelessTodo {...todo} />
}

const StatelessTodo = ({ ...todo }) => {
  return (
    <div>
      <p>{todo.title}</p>
      <p>{todo.description}</p>
      ...etc
    </div>
  )
}

. При таком подходе пользовательский интерфейс Todo может сообщать о состоянии приложения, будучи разъединенным из состояния, тестируемого в отдельности и пригодного для повторного использования.

На практике вы должны решить, какие компоненты подключить с учетом компромиссов. Чрезвычайно производительное приложение не должно предотвращать каждую возможную ненужную визуализацию. И вы всегда можете использовать профилировщик React devtools, чтобы увидеть, какие компоненты необходимо оптимизировать.