[Перевод] React Hooks становятся все более популярными, заменят ли они традиционный Redux?

React.js

предисловие

С тех пор как React Hooks был запущен, он получил большую популярность, и за этим последовало множество проблем.

В этой статье обсуждается одна из этих тем:React Hooks 是否会取代传统的Redux ?

Я думаю:不会.

На мой взгляд, по сравнению с традиционным компонентом класса, хуки не предоставляют никаких новых функций состояния, а только расширяют исходный API.

По сравнению с предыдущим, Hoos стал более кратким, а также улучшил удобство использования собственного API и применим ко все большему количеству сценариев.

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

Что такое Редукс

Редукс — это可预测的状态管理工具, который можно легко интегрировать в приложения React. Он имеет множество преимуществ, таких как:

  • единственный источник правды
  • обмен данными
  • статус транзакции
  • Изолируйте ввод-вывод состояния данных от побочных эффектов
  • откат состояния, также известный как时光机
  • Мощные возможности отладки, предоставляемые рядом вспомогательных инструментов

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

Что такое крючки

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

[Полный обзор новых возможностей React: Suspense и Hooks][сегмент fault.com/ah/119000001…]

Основные преимущества хуков:

  • Состояние данных может быть определено в функциональных компонентах, а методы жизненного цикла также могут быть смоделированы с помощью некоторых хуков.
  • Повторное использование логики; общедоступная логика может быть абстрагирована в отдельные хуки, переходя от традиционного программирования, ориентированного на жизненный цикл, к программированию, ориентированному на бизнес-логику.
  • Общее общее поведение, похожее на Render Props.

У обоих есть свои сильные стороны, но теперь есть хуки react-redux (реактивное горячее цинкование. Это .org/next/API/ Хорошо…) и редукционный крюк (реагировать JS.org/docs/hooks-…) такой инструмент, нам не нужно беспокоиться о том, как выбрать между двумя, приятно видеть дождь и росу.

Крючки приносят эти изменения

  • Изменен способ написания компонентов, с большим количеством опций, вы можете抛弃生命周期方Закон, Крюки объятий.
  • Render PropsЭта модель также имеет лучший дом

Какие технологии Хуки не заменят

  • Redux
  • HOC
  • 容器组件а также视图组件Разделение между чистой логикой и визуальными эффектами, которое легче тестировать.

Когда использовать хуки

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

Давайте посмотрим пример:

import React, { useState } from 'react';
import t from 'prop-types';
import TextField, { Input } from '@material/react-text-field';

const noop = () => {};

const Holder = ({
  itemPrice = 175,
  name = '',
  email = '',
  id = '',
  removeHolder = noop,
  showRemoveButton = false,
}) => {
  const [nameInput, setName] = useState(name);
  const [emailInput, setEmail] = useState(email);
const setter = set => e => {
    const { target } = e;
    const { value } = target;
    set(value);
  };
return (
    <div className="row">
      <div className="holder">
        <div className="holder-name">
          <TextField label="Name">
            <Input value={nameInput} onChange={setter(setName)} required />
          </TextField>
        </div>
        <div className="holder-email">
          <TextField label="Email">
            <Input
              value={emailInput}
              onChange={setter(setEmail)}
              type="email"
              required
            />
          </TextField>
        </div>
        {showRemoveButton && (
          <button
            className="remove-holder"
            aria-label="Remove membership"
            onClick={e => {
              e.preventDefault();
              removeHolder(id);
            }}
          >
            &times;
          </button>
        )}
      </div>
      <div className="line-item-price">${itemPrice}</div>
      <style jsx>{cssHere}</style>
    </div>
  );
};

export default Holder;

В приведенном выше примере используется useState для отслеживанияnameа такжеemail:

const [nameInput, setName] = useState(name);
const [emailInput, setEmail] = useState(email);

Вы можете заметить, что есть также removeHolder, этот создатель действий из Redux. В этом режиме можно смешивать и сочетать различные методы.

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

В любом случае, все приложения React, которые я сделал до сих пор, использовали Redux, и принцип очень прост:

Используйте состояние компонента для состояния компонента и Redux для состояния приложения. Каждый выполняет свои обязанности и дополняет друг друга.

Когда использовать Редукс

Другой распространенный вопрос:我应该把所有的数据和状态都放在Redux吗？Если вы этого не сделаете, разве нельзя использовать путешествия во времени?

Ответ - нет.

Поскольку многие состояния в приложении эфемерны, ограничений недостаточно, чтобы предоставить достаточно информации для телеметрии журнала или путешествий во времени. Если то, что вы делаете, не является текстовым редактором с синергией (например, Lark Docs, в котором я участвовал раньше, и документами Tencent и т. д.), вы можете сохранить каждую операцию пользователя и данные каждого набора изменений, включая положение курсора и Дополнительная информация.

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

Другими словами, каждый раз, когда вы используете Redux, знайте, зачем он вам нужен. Если ваше приложение имеет следующие требования, вы можете рассмотреть возможность использования Redux:

  • Необходимо сохранить или загрузить состояние
  • Совместное использование состояния между компонентами
  • Необходимо разделить бизнес-логику или обработку данных с другими компонентами

Или тот пример:

Ссылка доступа:tddday.com/

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { compose } from 'ramda';
import page from '../../hocs/page.js';
import Purchase from './purchase-component.js';
import { addHolder, removeHolder, getHolders } from './purchase-reducer.js';
const PurchasePage = () => {
  // You can use these instead of
  // mapStateToProps and mapDispatchToProps
  const dispatch = useDispatch();
  const holders = useSelector(getHolders);
const props = {
    // Use function composition to compose action creators
    // with dispatch. See "Composing Software" for details.
    addHolder: compose(
      dispatch,
      addHolder
    ),
    removeHolder: compose(
      dispatch,
      removeHolder
    ),
    holders,
  };
return <Purchase {...props} />;
};
// `page` is a Higher Order Component composed of many
// other higher order components using function composition.
export default page(PurchasePage);

Этот компонент не обрабатывает DOM, это чисто презентационный компонент, который подключается к Redux с помощью API React-Redux hooks.

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

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

Причина, по которой я предпочитаю использовать redux-saga вместо redux-thunk, заключается в функции изоляции последнего).

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

Редукс — это архитектура

Redux сильно отличается от библиотек управления состоянием. Но по сути это тоже подмножество архитектуры Flux.

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

На самом деле базовая реализация Redux требует всего несколько десятков строк кода.

Это также большое преимущество Redux. Если вы хотите использовать больше нативных состояний компонентов и хуков API и не хотите втискивать все в Redux, это прекрасно.

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

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

Если вам нужно сохранить или поделиться этим состоянием позже, вам нужно сохранить его в Redux.

Эпилог

Хуки не заменят традиционный Redux. Его появление дает нам больше гибкости и больше возможностей для написания компонентов. Я надеюсь, что все FEers смогут вовремя освоить эту новую функцию и найти свою любимую позу разработки ~

Написано поверхностно, если есть неточности прошу поправить.

Оригинальная ссылка прилагается:medium.com/JavaScript-...

Категории