Хуки React: это не магия, это просто массивы

Хуки React: это не магия, это просто массивы

От автора: я большой поклонник нового API хуков. Тем не менее, у него есть некоторые странные ограничения относительно того, как вам следует его использовать. Здесь я опишу модель, с помощью которой те, кто пытается понять причины этих правил, могут представить себе, как именно используются в React хуки.

ПРЕДУПРЕЖДЕНИЕ: API хуков является экспериментальной функцией

Эта статья посвящена API хуков, который в настоящее время является экспериментальным предложением. Здесь вы можете найти документацию по стабильному API React.

Как работают хуки

Я слышал, как некоторые люди не могли разобраться с «магией», связанной с новым предложением API хуков, поэтому я подумал, что попытаюсь объяснить, как работает предложение синтаксиса хотя бы на поверхностном уровне.

Правила хуков

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Не вызывайте хуки внутри циклов, условий или вложенных функций

Вызывайте хуки только из функций React

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

Первое, как мне кажется, может сбивать с толку, поскольку может показаться неестественным программирование с использованием API, и это то, что я хочу рассмотреть в этой статье.

Управление состоянием в хуках — все дело в массивах

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

Как мы можем реализовать useState()?

Давайте рассмотрим пример, чтобы продемонстрировать, как может работать реализация состояния наведения. Начнем с компонента:

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

Итак, что React будет делать с этим?

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

1) Инициализация

Создайте два пустых массива: seters и state. Установите курсор на 0

Инициализация: два пустых массива, курсор — 0

2) Первый рендеринг

Запустите функцию компонента в первый раз. Каждый вызов useState(), при первом запуске, вводит функцию сеттера (привязанную к позиции курсора) в массив setters, а затем вводит определенное состояние в массив state.

Первый рендеринг: элементы записываются в массивы при перемещении курсора

3) Повторный рендеринг

При всех последующих рендерингах курсор сбрасывается, и эти значения просто считываются из массива.

Последующие рендеринги: элементы считываются из массивов при перемещении курсора

4) Обработка событий

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Сеттеры «помнят» свой индекс и устанавливают память в соответствии с этим

И нативная реализация

В этом примере кода демонстрируется эта реализация:

Почему порядок важен

Теперь, что произойдет, если мы изменим порядок хуков для цикла рендеринга, основываясь на каком-то внешнем факторе или даже состоянии компонента? Давайте сделаем то, от чего нас предостерегает команда React:

Это противоречит правилам!

Здесь у нас вызов useState размещается в условном выражении. Давайте посмотрим, какой хаос это создает в системе.

Первый рендеринг некорректного компонента

Рендеринг дополнительного «плохого» хука, который позже будет удален

На этом этапе наши экземпляры vars firstName и lastName содержат правильные данные, но давайте посмотрим, что будет при втором рендеринге.

Второй рендеринг некорректного компонента

Удаляя хук между рендерингами, мы получаем ошибку

Теперь как для firstName, так и для lastName задано «Rudi», поскольку наше хранилище состояний становится непоследовательным. Это явно ошибочно и не работает, но это дает нам представление о том, почему правила для хуков сформулированы таким образом.

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

Представьте хуки, как работу с набором массивов, и вы не будете нарушать правила

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

Таким образом, стоит представить себе хуки, как набор массивов, которым нужен последовательный курсор. Если вы это сделаете, все должно работать.

Заключение

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

Хуки — эффективный плагин API для компонентов React. Многие уже в восторге от него, и на то есть причины. Если вы представляете себе их в виде модели, в которой состояние существует как набор массивов, тогда вы не должны нарушать правила их использования.

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

Автор: Rudi Yardley

Источник: https://medium.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree