Пора сделать еще один шаг к хукам и изучить useReducer, useRef, useContext и useMemo.
Да, эта статья основана на хуках Advance, поэтому я предполагаю, что вы знакомы с хуками и знакомы с использованием таких базовых хуков, как useState и useEffect. Так что, если вы не знаете о хуках, вы можете поискать это в официальной документации React. Но я буду любезен😉 и кратко расскажу о крючках.
Крючки ??? 🤨
Хуки - это последние функции, выпущенные в React версии 16.8.0. При разработке приложений React мы использовали классы для создания компонента с отслеживанием состояния, но вся эта концепция скоро изменится. Хуки вот-вот произведут революцию в том, как должен быть написан код React. Раньше мы не могли использовать состояние в функциональных компонентах, но теперь с помощью хуков мы можем подключить состояние, методы жизненного цикла и другие функции на основе классов к функциональным компоненты. С точки зрения непрофессионала, крючки превращают ваши функциональные компоненты в стероиды.
Узнайте больше о хуках React:
Значит ... уроки не работают ??
Неа, хуки - это совершенно новый API, он не влияет на ваши предыдущие знания. Если вам не нравятся хуки (в чем я очень сомневаюсь), вы все равно можете использовать компоненты на основе классов, как раньше.
Что не так с компонентами на основе классов? 😒
Не знаю, как вы, но я ненавижу привязывать this каждый раз, когда я создаю функцию. это до сих пор не дает мне покоя. Нет ничего плохого, но зачем использовать то, что сбивает вас с толку, если вы можете использовать что-то, что легче понять.
Функции легче понять, чем классы (в этом нет споров).
Если вы не знаете о хуках useState и useEffect, просто нажмите здесь.
Извините за задержку, давайте перейдем к не так много разговоров о крючках.
Полезный совет: Bit помогает вашей команде совместно работать над общими компонентами. Каждый компонент можно независимо разрабатывать, тестировать и использовать в ваших приложениях. Bit обрабатывает весь жизненный цикл каждого общего компонента, поэтому вы можете сосредоточиться на создании отличных приложений.
крючок useReducer ❤
Это мой любимый крючок. Если вы являетесь частью мира redux, вы должны знать, что такое редуктор. А если нет, не волнуйтесь, потому что ...
Редуктор - это функция, которая принимает два аргумента и возвращает один.
Редуктор - это функция, которая принимает 2 аргумента (состояние и действие) и возвращает новое состояние в зависимости от типа действия.
Помните функцию уменьшить? Да, концепция такая же, как и у хуков useReducer.
Выше представлена функция ES6 reduce. Следует обратить внимание на то, что метод reduce принимает два аргумента, функцию и начальное значение и возвращает одно значение. То же, что и хук useReducer. Он принимает два аргумента: первый - это функция редуктора (возвращает новое состояние), а второй - начальное состояние.
Мы можем разложить этот хук на две части.
- новое состояние
- способ отправки
newState - это обновленное состояние, в то время как метод отправки используется для отправки действий (отправки действий в функцию редуктора). Обновления состояния выполняются при запуске действия. Итак, когда происходит событие, метод диспетчеризации отправляет действие функции редуктора, и на основе действия обновляется состояние.
Действие - это объект javascript, у которого есть свойство type и свойство payload.
Таким образом, поток будет примерно таким: -
Происходит событие - ›Действие отправки с использованием метода отправки -› Редуктор обновляет состояние в зависимости от «типа» действия
Ниже приведен фрагмент кода для простого компонента Counter.
Начальное значение счетчика равно 0, и редуктор возвращает обновленное состояние в соответствии с типом действия. Если тип действия - «добавить», увеличьте состояние на единицу, если тип «вычесть» возвращает состояние минус один.
Итак ... вышеупомянутый поток работает следующим образом -
Событие происходит (здесь нажатие кнопки) = ›действие отправляется с использованием метода отправки =› в зависимости от типа действия, редуктор выполняет свою работу.
Ниже представлена демонстрация CodeSandBox для приложения Counter.
крючок useRef
Ссылки используются для доступа к элементам DOM или React, отображаемым в функции рендеринга. И стандартный способ использования ссылок в предыдущих версиях React был примерно таким:
А чтобы иметь доступ к текущему узлу -
const node = this.myRef.current;
Теперь посмотрим, как работает хук useRef:
У нас есть доступ к тегу input. Намного проще, чем раньше 😎 .
useContext 🔥
Контекст решает одну из самых больших проблем React - бурение опор. Render props был предложенным методом, необходимым для использования контекста, что не является изящным способом сделать это.
Ловушка useContext обеспечивает более чистый и оптимизированный способ использования контекста.
Одна проблема со старым способом заключалась в том, что было много вложений. Если бы у нас было больше родительских контекстов, использование этих контекстов могло бы быть чертовски беспорядочным.
Видите ли, сложное вложение для получения всего двух значений. Посмотрим, как устроен крючок
крючок useMemo
В React есть ловушка useMemo, которая в основном позволяет нам запоминать сложные и дорогостоящие функции, чтобы мы могли избежать их вызова при каждом рендеринге ...
Ух ... воу ... погоди ... погоди ... memoize ?? .. Что это? 😕
Ах, моя беда. С точки зрения непрофессионала, memoize означает избегать выполнения одной и той же задачи (или выполнения одной и той же функции) для одних и тех же значений (тех же параметров). Я приведу пример, который я взял из выступления одного из моих коллег. (Я очень рекомендую вам посмотреть его слайды здесь)
Скажем, мы должны написать функцию, чтобы найти квадрат заданного числа. Это легко -
Видите, мы дважды вычислили квадрат 16. Ничего страшного, потому что это не интенсивная операция, если бы это было что-то дорогое, нам пришлось бы запомнить это.
Итак .. Как это запомнить ??
Мы могли бы создать мини-кеш и хранить в нем ранее вычисленные значения. И в следующий раз нам не нужно вычислять квадрат 16. Вместо этого мы можем выбрать значение из мини-кеша. Вот как -
Имеет смысл, но каковы его варианты использования в React ?? 🙄🙄
В React мы не хотим повторно отображать компонент, даже если его свойства такие же. Итак, мы должны запоминать соответствующий компонент с помощью хука useMemo, чтобы компонент повторно отображался только при изменении свойств.
Круто, useMemo принимает два параметра, функцию обратного вызова и массив входных данных.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useMemo будет пересчитывать мемоизированное значение только тогда, когда один из входов изменился. Таким образом, оптимизация производительности.
Заключение
В этой статье мы узнали о некоторых интересных вещах, связанных с React Hooks. Хотя есть гораздо больше концепций допинга, о которых я расскажу в своих следующих статьях. Надеюсь, вам понравилась эта статья. Не стесняйтесь комментировать и спрашивать. Спасибо за чтение 🙏 💖
