Прежде всего, мы начнем с основной идеи высокого уровня для новичков. Давайте начнем с основ реагирования…. Вы все также можете взглянуть на базовую реализацию веб-сайта, используя хуки, которые я прикрепил в конце.😻
ПРИМЕЧАНИЕ. Если у вас уже есть опыт работы с реагированием и вы здесь только для того, чтобы узнать о хуках, пропустите «Введение в React» и перейдите в раздел «Хуки» вниз 👇 ……
Введение в реакцию
React — это библиотека JavaScript для создания удобных и интерактивных пользовательских интерфейсов, созданная FACEBOOK. React обновит и отобразит изменение при обновлении данных. Давайте представим, что React строится, собирая все строительные блоки. Наименьшими строительными блоками реакции являются элементы.
Следующий стандартный блок — это Компоненты. Эти компоненты помогают создавать повторно используемые и независимые пользовательские интерфейсы. Мы можем создавать компоненты, используя классы и функции.
Пример компонента класса, выводящего сообщение «Hello world», показан ниже.
Пример функционального компонента, который печатает «Hello world» в качестве вывода, показан ниже.
Теперь мы можем разделить эти компоненты на с сохранением состояния и с сохранением состояния. До этого, что такое состояние? 😵
Состояние – это встроенный объект, в котором мы храним значения свойств, принадлежащих компоненту. В приведенном ниже коде показан компонент класса с отслеживанием состояния.
Здесь, в этом компоненте класса, books — это свойство состояния, которое инициализируется как нулевой массив. Итак, теперь возникает вопрос к вам. Как правильно реализовать функциональный компонент с отслеживанием состояния? 😕
Ответ: Да! 😍 но мы не можем использовать ключевые слова «это. state» в функциональном компоненте😮, вместо этого мы будем использовать ключевые слова «useState»..
Это веб-сайт электронной коммерции с очень сложным использованием компонента состояния в классе:
и код указанного выше веб-сайта:
Это может быть полезно для новичков, которые только начали учиться реагировать.
Сейчас мы посмотрим, что такое КРЮЧКИ 😻
КРЮЧКИ
Как упоминалось выше, что такое useState? Здесь на помощь приходит КРЮЧКИ. Но что это такое?
Что такое КРЮК?🤥
HOOKS – это специальная функция, позволяющая создавать состояние добавления функционального компонента. Крюки появились в React 16.8.
Так где его использовать?
Где использовать крючки?
Когда мы пишем функциональный компонент и хотим добавить к нему состояние, мы можем превратить функциональный компонент в компонент класса, поскольку мы не можем добавить состояние в функцию, или в качестве альтернативы мы можем использовать HOOKS добавить состояние в функциональный компонент. В этой ситуации мы используем КРЮЧКИ. Но как добавить HOOKS?
КАК добавить КРЮЧКИ?
Теперь мы видим пример переменной с именем count в состоянии, которая инициализируется нулем как в классе с отслеживанием состояния, так и в функциональном компоненте.
На рисунке 1 и рисунке 2 показано, как добавить состояние как к классу, так и к функциональному компоненту. На рисунке 2 показана реализация HOOKS.
На рисунке 2 «useState» — это ключевое слово, эквивалентное «this. состояние» на рисунке 1.
И на рисунке ниже показано, как инициализировать состояние в компоненте класса, где счетчик инициализируется равным 0.
И на рисунке ниже показано, как инициализировать состояние в функциональном компоненте.
Это высокоуровневая идея того, что такое хук и реализация хука. Мы увидим особенности хука, используемые в хуках, и насколько они похожи на компоненты класса.
- useState() 👉 Это хук, который почти похож на «this. состояние» в компоненте класса
- setCount в приведенном выше примере 👉 Это почти похоже на setState в компоненте класса.
- useEffect() 👉 Это ловушка, которая почти аналогична методам жизненного цикла класса React, таким как componentDidMount, componentDidUpdate и componentWillUnmount все три вместе взятые.
ПРАВИЛА КРЮЧКОВ
Есть несколько правил, в которых мы должны использовать хуки и не должны их использовать.
Мы можем вызывать HOOKS, когда:
- Мы можем вызывать хуки из функциональных компонентов React.
- Мы можем вызывать перехватчики из пользовательских перехватчиков.
Мы не можем вызывать HOOKS, когда:
- Крючки внутри циклов, условий или вложенных функций
Это объяснение
Что такое ХУК?
Где использовать крючки?
КАК добавить КРЮЧКИ?
Надеюсь, вы получили базовое представление о хуках и их использовании. 😍
Вы можете посмотреть демонстрацию использования HOOKS в функциональном компоненте на очень простом веб-сайте:
Код указанного выше веб-сайта:
НАСЛАЖДАЙТЕСЬ ПРОГРАММИРОВАНИЕМ, ПРОГРАММИРУЙТЕ ЕЖЕДНЕВНО и ЛУЧШЕ
