Сравнивая "Поднятие состояния вверх" с Redux, управление состоянием Flux

Question

Я понял React поднятие-состояние-вверх "https://reactjs.org/docs/lifting-state-up.html". С помощью этого метода разработчик должен передать функции состояния у родителей как реквизиты для ребенка. После этого я сделал пару сессий на приставке. Но яЯ не могу понять основные различия в подъеме состояния вверх по сравнению с Redux, управление состоянием потока в простых сравнениях.

1. Означает ли это, что в больших веб-приложениях не следует использовать «поднятие состояния вверх» и сокращать /Поток становится неизбежным
2. Redux упрощает весь процесс управления состоянием, но есть ли какое-либо преимущество, кроме абстракции и упрощения.
3. Используя Redux, мы получим единственный источник правды по сравнению с "Поднятие состояния ", где нам нужно сохранять состояние во многих компонентах и, таким образом, увеличивать сложность всего кода. При поднятии состояния вы можете иметь единственный источник правды, единственным недостатком этого подхода будет то, что ваш родительский компонент будет загроможденмного состояний.
4. Есть ли угол производительности междуприращение и поднятие состояния вверх
5. Если React называется библиотекой представлений, то должен ли он в первую очередь задавать опцию управления состоянием?

Answer 1

1. Локальные состояния и использование Redux могут мирно сосуществовать :), т.е. они не являются взаимоисключающими.
2. В случае большого применения удобство подъема кода может быть очень запутанным.Redux предлагает более аккуратное решение.
3. Наконец, прямо изо рта лошади - статья соавтора Redux - Вам может не понадобиться приставка https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Таким образом, в моемМнение, что вы должны сначала попытаться разработать приложение реакции (средней сложности) без Redux.Используйте концепцию «Поднятие вверх».В какой-то момент в процессе разработки вы бы интуитивно поняли, что наличие библиотеки управления состояниями, такой как Redux, сделает жизнь намного проще.Иногда лучше научиться этому нелегко.Переход на Redux, когда это абсолютно необходимо, заставит вас ценить это больше.

Answer 2

Здесь уже есть несколько отличных ответов. Я выберу более прагматичный подход:

Redux предоставляет единый источник правды для всего вашего состояния, хотя он может стать несопоставимым, когда вы разделите свои редукторы.

Состояние компонента означает, что состояние приложения, естественно, более разнородно, но порции будут централизованы посредством поднятия состояния, как вы упомянули.

То, как вы управляете состоянием в проекте, со временем будет развиваться. То, как вы управляете своим состоянием, также должно основываться на приложении, которое вы пишете.

Обратите также внимание, что Redux и режим подъема не являются взаимоисключающими методами - вы можете соответствующим образом использовать оба.

Для новых проектов я оцениваю удобство наличия всего состояния в одном месте (единый источник правды) по сравнению с неудобными накладными расходами на необходимость написания действий и подключения компонентов.

Если вы сомневаетесь, я бы предложил начать с состояния компонента, поднять его на один-два уровня, а после этого я бы поднял его в хранилище с резервированием и подключил мои компоненты напрямую. Это прагматично раскрывает вам преимущества обоих подходов.

Инструментарий и единый характер централизованного хранилища избыточных данных означают бесплатное получение различных функций (постоянство, путешествия во времени, избыточные средства разработки и т. Д.). С другой стороны, я могу потратить довольно много времени на соединение приложения с редуксом в первые дни и упростить видимость того, что я собирался написать.

Answer 3

Чтобы ответить на некоторые из ваших вопросов:

1. Означает ли это, что в больших веб-приложениях не следует использовать «поднятие состояния», а избыточность / поток становится неизбежным.

Нет.Поднятие состояния до сих пор остается предпочтительным делом в первую очередь.Вам не нужно помещать все в глобальный магазин, даже если у вас уже есть это в вашем проекте.Многие состояния по-прежнему будут локальными для некоторых компонентов, и именно здесь они должны храниться.Также прочитайте Когда мне следует использовать redux .

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

Если это так, выне правильно применил принцип поднятия состояния.Компонент, который имеет состояние, все еще должен быть единственным источником правды.Если нет, то вы недостаточно подняли его.

Есть ли рабочий угол между повышением и подъемом.

Да.Особенно если сделано неправильно.Помните, что ваш mapStateToProps вызывается для каждого изменения состояния.Если вы не обратите внимание, вы будете делать много ненужных расчетов.Вы можете преодолеть часть этого с помощью селекторов .

Answer 4

Redux - это просто абстракция, он не дает никакой оптимизации производительности, которую вы не можете достичь самостоятельно.

Однако для достижения оптимизации производительности, которую Redux предлагает «из коробки»,вам нужно проделать большую работу, например, реализовать shouldComponentUpdate почти для каждого компонента.

Например, если некоторые компоненты должны иметь общее состояние, состояние должно быть поднято до общего родителя.среди компонентов.Все остальные компоненты между родительским и теми компонентами, которые не используют общее состояние, должны будут игнорировать изменения реквизита, связанные с этим состоянием через shouldComponentUpdate.

Каждый компонент должен также реализовывать shouldComponentUpdate /PureComponent, чтобы проверить, изменились ли его реквизиты, в противном случае все дочерние компоненты будут автоматически перерисованы при перерисовке родителя.

Redux также предлагает несколько других удобных функций:

• Отсутствие необходимости передавать обратные вызовы и реквизиты через глубоко вложенные компоненты
• Redux DevTools для визуализации изменений состояния, отладки во времени и т. Д.
• Прямое сохранение состояния до localStorage через redux-persist
• Использование создателей действий / thunks , шаблон представления / контейнера и т. Д. Повышает возможность повторного использования кода, возможности тестирования и сопровождения.

Answer 5

Означает ли это, что в больших веб-приложениях "подъем состояния" не должен использоваться, а избыточность / поток становится неизбежной

Абсолютно нет, вам нужно использовать избыточность / поток,только тогда, когда данные, используемые вашим приложением, совместно используются большим количеством компонентов, которые не имеют достаточно близкого родителя, и что данные продолжают изменяться, а представление необходимо обновить.

В случае, когдаданные передаются в небольшой раздел вашего приложения, вы можете рассмотреть возможность использования Context-API для этой цели.

Redux упрощает весь процесс управления состоянием, но есть ли какое-либо преимущество, кроме абстрагирования и упрощения.

Да, Redux предлагает ширину ряд преимуществ

• Сохранение состояния в локальном хранилище и его загрузка из коробки из коробки.

• Предварительно заполните состояние на сервере, отправьте его клиенту в формате HTML и загрузитесь с него из коробки.

• Сериализуйте действия пользователя и присоедините их вместе сснимок состояния для автоматических отчетов об ошибках, чтобы разработчики продукта могли воспроизвести их для воспроизведения ошибок.

• Передача объектов действия по сети для реализации сред совместной работы без существенных изменений в коде.

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

Как я уже говорил ранее, если данные, еслиразделенный между компонентами, которые не имеют прямого прямого предка, вы можете предпочесть Redux.Redux также предлагает преимущество, заключающееся в том, что он реализует соединение как PureComponent, и, следовательно, обновления состояний влияют только на компоненты, которые их используют, и не вызывают повторного рендеринга для других компонентов, которые не используют эти конкретные состояния в качестве реквизитов.

С поднятием состояния вы должны передать значения до конца, хотя каждый компонент, а затем вы должны убедиться, что промежуточные компоненты являются чистыми.

Существует ли угол производительности между редуксом и повышением состояния

Проблема производительности проявляется, когда вы переходите в состояние вниз и не используете PureComponents, вызывая ненужныеповторно делает.Redux полезен здесь