Крючки классные. Что ж, я полагаю, это зависит от того, о каком крючке вы говорите, поэтому позвольте мне немного пояснить. Перехватчики React потрясающие. Они упрощают наши компоненты реакции и чрезвычайно мощны и разнообразны. Возможно, вы пробовали ловить хуки, используя такие вещи, как useState и useEffect, или, может быть, вы уже опытный специалист по хукам! В любом случае, я надеюсь, что смогу поделиться с вами новым и уникальным способом упростить (на мой взгляд) ваши формы в ответ с помощью ловушки useReducer. useReducer становится тем мощнее, чем больше и сложнее ваша форма, но все же может помочь упростить код в небольших формах. В этой статье мы будем использовать эту форму в качестве примера:
Если вы новичок в хуках, не беспокойтесь, я постараюсь вас познакомить, прежде чем мы перейдем к использованию useReducer. Если вы уже являетесь профессионалом, ищущим новый инструмент, перейдите к разделу useReducer ниже.
Репо для этой демонстрации можно найти здесь:
Не стесняйтесь форкнуть и клонировать его на свой локальный компьютер и немного поиграйте! Проведите небольшое тестирование, чтобы увидеть, какой стиль формы вам больше всего нравится.
useState против компонентов класса
Если вы никогда раньше не использовали хуки, вы, вероятно, пишете формы в компонентах класса с отслеживанием состояния. Код для приведенной выше формы может выглядеть примерно так:
Здесь все значения формы хранятся в состоянии и отслеживаются с помощью handleFormChange. Это все очень хорошо, но я предполагаю, что вы здесь не для того, чтобы изучать компоненты классов в React. Итак, перейдем к крючкам!
Чтобы написать ту же форму в функциональном компоненте с использованием useState, ваш код может выглядеть примерно так:
Выше ссылка на официальную документацию React по хукам. Здесь вы можете прочитать обо всех преимуществах крючков.
Это выглядит намного чище, чем компонент класса выше. Давайте разберемся, что здесь происходит. useState - это функция, которая принимает один аргумент: начальное состояние. Он возвращает значение этого начального состояния и функцию, которая может его обновить. Мы можем разобраться в этом, взглянув на один из приведенных выше примеров.
const [firstName, setFirstName] = useState('')
Здесь начальное состояние - пустая строка, переменная, присвоенная этому значению, называется firstName, а функция для обновления этой переменной называется setFirstName. Чтобы уточнить подробности, посмотрите на этот фрагмент кода:
Если вы все еще следуете остальной части формы, становится довольно просто. Вместо вызова setState каждый раз при изменении формы вызывается конкретная функция обновления, возвращаемая из useState, и обновляется соответствующая переменная. Теперь давайте посмотрим, как создать такую же форму с помощью хука useReducer.
useReducer
Вот как вы можете создать форму выше, используя ловушку useReducer:
Выше представлена официальная документация для useReducer. Иди туда, чтобы узнать больше!
Итак, давайте разберемся, что происходит наверху. Вместо того, чтобы иметь несколько переменных состояния, как в случае с useState, мы создаем объект initialValues . Это действует как наше начальное состояние. useReducer принимает два аргумента (может потребоваться больше, подробнее см. выше). Первый из этих аргументов - функция-редуктор. Второе - это исходное состояние. useReducer возвращает пару точно так же, как useState. Начальное состояние и функция, которая вызовет вашу функцию-редуктор. Итак, formValues становится нашим контейнером для состояния, а setFormValues становится нашей функцией обновления.
setFormValues вызовет нашу функцию-редуктор с автоматически переданным текущим состоянием (т. е. formValues), а также с любыми предоставленными нами аргументами. Благодаря оператору распространения, используемому в нашей функции редуктора, мы можем просто передать атрибут name из нашей формы и обновленное значение и обновить наши formValues объект. Использование useReducer позволяет нам хранить все значения формы в одном объекте. Это может быть полезно, если вы публикуете значения формы в API или передаете их в другой компонент. Вам не нужно создавать новый объект, используя все ваши переменные useState. Он также упрощает любые обновления нашего объекта formValues , выполняя эти обновления в одной центральной функции.
Итак, вот оно что! Три возможных способа работы с формами в React. Как и у всех вещей в коде, у каждого есть свои преимущества и недостатки. Я рекомендую вам протестировать их самостоятельно и выяснить, какой из них лучше всего подходит для вас.
