Как сказано в React Doc, хуки - это новая функция, которая позволяет вам использовать состояние и другие функции React без написания класса. В настоящее время он находится в React v16.7.0-alpha, а для Vue JS - экспериментальный.
Мотивация:
Ниже описаны преимущества крючков и причины, по которым вам не о чем беспокоиться.
- Хуки не заменяют наши знания о концепциях React / Vue.
- Создатели не планируют удалять классы из React / Vue.
- Важно то, что хуки работают бок о бок с существующим кодом, поэтому вы можете применять их постепенно.
- Полная обратная совместимость.
Мотивы для предложения функции хуков следующие:
- Чтобы повторно использовать логику компонентов с отслеживанием состояния
- Упрощение компонентов для облегчения понимания
- Избавьтесь от феномена «Классы сбивают с толку и людей, и машины»
Идея состоит в том, чтобы дать функциональные компоненты в экосистеме React. Это основные причины, по которым React представляет хуки, а также VUE уже на следующий день. Теперь мы перейдем к кодам с использованием хуков как с React JS, так и с Vue JS.
Вы можете попробовать React hooks API в альфа-версии React 16:
$ yarn add [email protected]
Использование хуков с React JS
В React Раньше для создания приложения счетчика наш код выглядел следующим образом:
Использование React Hook стало намного проще благодаря использованию прямого API, предоставляемого React для уже известных нам концепций, таких как свойства, состояние, контекст, ссылки и жизненный цикл.
Использование хуков с VUE
Как я уже сказал, «Эван Вы» экспериментально реализовал перехватчики React во Vue.
Ранее, используя Vue JSX2, я создал приложение Counter, подобное этому
Используя хуки в Vue JS, это можно сделать так:
Проверив реализацию хуков как в React, так и во Vue JS, мы обнаружили, что преимущества использования хуков здесь действительно очевидны.
- Сократите реализацию кода, мы перейдем от класса к функциональному компоненту. Это также означает уменьшение размера пакета в байтах.
- Теперь можно делиться логикой, мы развязали логику не только для создания состояния, но и для того, как оно обновляется.
В React JS есть два типа хуков: базовые и дополнительные. Надеюсь, что Vue JS скоро реализует их все.
Базовый
- Состояние → useState
- Контекст → useContext
- Побочные эффекты → useEffect
Дополнительный
- Ссылки → useRef
- Обратные вызовы → useCallback
- Редукторы → useReducer
- Запоминаемые значения → useMemo
- Императивные методы → useImperativeMethods
- Эффекты мутации → useMutationEffect
- Эффекты макета → useLayoutEffect
Прямо из React Doc.
Как React связывает вызовы Hook с компонентами?
React отслеживает текущий компонент рендеринга. Благодаря Правилам хуков мы знаем, что хуки вызываются только из компонентов React (или пользовательских хуков, которые также вызываются только из компонентов React).
Существует внутренний список «ячеек памяти», связанных с каждым компонентом. Это просто объекты JavaScript, в которые мы можем поместить некоторые данные. Когда вы вызываете ловушку типа useState(), она считывает текущую ячейку (или инициализирует ее во время первого рендеринга), а затем перемещает указатель на следующую. Таким образом, каждый из нескольких useState() вызовов получает независимое локальное состояние.
Заявление React JS об использовании хуков:
Наконец, не нужно спешить с переходом на хуки. Мы рекомендуем избегать любых больших перезаписей, особенно для существующих компонентов сложных классов. Чтобы начать думать на крючках, нужно немного поменять мышление. По нашему опыту, лучше сначала попрактиковаться в использовании хуков в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете Hooks, не стесняйтесь присылать нам отзывы, положительные или отрицательные.
Заявление Vue JS об использовании хуков:
Полностью экспериментальный, не используйте это в продакшене.
Хотите узнать больше о крючках?
Вы можете прочитать больше о хуках в React DOC, здесь. Получите тщательно подобранный список избранных статей на Medium о перехватчиках React JS из статьи ниже.
Удачи! Надеюсь, вам понравился этот пост :)
