Технология, которую я использовал на прошлой неделе => React Hooks
Привет всем,
В этой статье предполагается, что у вас есть практические знания React, как функциональных компонентов, так и компонентов на основе классов, управление состоянием в компонентах на основе классов, передача свойств и состояния. Такие вещи.
Это будет введение, когда дело доходит до хуков React, и я уверен, что есть много людей, которые могут использовать то, что я здесь пишу, намного лучше, чем я. Работа с React Hooks — это будущее написания кода React, и многие менеджеры по найму сейчас упоминают по имени в интервью и во время технических проверок.
Хуки — это новейшее дополнение к React 16.8, поэтому убедитесь, что ваш проект использует эту версию React, прежде чем приступить к написанию хуков. А еще лучше начать новый проект и использовать create-react-app, чтобы получить последнюю версию и все новейшие функции.
Несколько приятных вещей о хуках (их много)
Вы можете попробовать хуки в нескольких компонентах, не переписывая тонны кода. Они полностью опциональны и не являются обязательными для написания кода в React. Учитесь в своем собственном темпе.
Хуки не меняют основных концепций React. Вместо этого они представляют собой более прямой доступ к концепциям React, которые мы все знаем и любим props, state, context, refs, lifecycle .
Хуки обратно совместимы. Ничто не сломается, если вы начнете использовать их в своем приложении. Ну... по крайней мере, из-за Крюков ничего.
Зачем вообще внедрять хуки?
Повторно используйте логику состояния. Это не то, что я буду освещать здесь, но может быть что-то для другого блога. Хуки позволят вам повторно использовать вашу логику, создав свои собственные хуки и используя их в компонентах, которым нужна логика с отслеживанием состояния. Это упрощает обмен крючками с другой частью приложения или со всей командой разработчиков.
Сложные компоненты также сбивают с толку. Хотя весь код, по-видимому, связан с этим компонентом, логика различных методов жизненного цикла может охватывать несколько разных вещей. (извлечение данных и настройка слушателей). Было бы лучше оставить их отдельно. Хуки позволяют разбить сложный компонент на более мелкие функции в зависимости от того, какие части связаны между собой, а не принудительно разбивать на основе методов жизненного цикла компонента.
Итак, какие крючки существуют?
useState() — первый хук. Он вызывается внутри функционального компонента, чтобы добавить к нему некоторое локальное состояние. React сохранит это состояние между повторными рендерингами.
useState возвращает пару: текущее значение состояния и функцию, позволяющую обновить состояние. Думайте об этом как о this.setState с одним явным отличием. useState не объединяет старое и новое состояние вместе. useState() принимает в качестве аргумента начальное значение для этой части состояния.
Выше приведен простой пример функционального компонента, создающего часть состояния с именем count. Этот счетчик можно изменить с помощью функции setCount, которую мы определили в строке 5. (часть возвращаемой пары из хука useState())
Я знаю, о чем ты думаешь. Что мы делаем для состояния с более чем одним значением. Простой …
Здесь следует отметить одну вещь. Элементы в квадратных скобках при объявлении части состояния [num, setNum] for example. Эти имена не являются частью React API. Вы можете назвать их как хотите (так вы получите доступ ко многим частям состояния.
Крюк Эффекта
useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Извлечение данных, настройка подписки и ручное изменение модели DOM — все это примеры побочных эффектов. useEffect сообщает React, что вы должны что-то сделать после рендеринга, и позволяет вам написать функцию для того, какой побочный эффект вы хотите получить.
Важное замечание… useEffect запускается после каждого рендера. (представьте, что это происходит после componentDidMount and componentDidUpdate.
Вот еще один пример из документации React, основанный на функциональном компоненте счетчика.
Мы объявляем переменную состояния count, а затем сообщаем React, что нам нужно использовать эффект. Мы передаем функцию в хук useEffect. Функция, которую мы передаем, по сути является эффектом. Внутри тела этой функции мы устанавливаем document.title. Мы можем прочитать последний count внутри эффекта, потому что он находится внутри области действия нашей функции, он запомнит использованный нами эффект, а затем запустит наш эффект после обновления DOM. Это происходит для каждого рендера, включая первый.
Очистка эффекта? Вернуть функцию
Команда React даже включила способ очистки после размонтирования компонента. Для этого верните функцию, которая обрабатывает очистку, когда компонент размонтирован. Эта функция невероятно удобна, потому что вы можете сохранить логику добавления и удаления чего-либо в одном и том же эффекте!
Я хотел бы сосредоточиться на обучении и работе исключительно с хуками в течение следующего месяца, и я хотел бы преобразовать некоторые из моих других проектов только в функциональные компоненты и посмотреть, смогу ли я сохранить ту же функциональность.
Существует также способ создания собственных хуков для работы с логикой с отслеживанием состояния и повторного использования ее в различных компонентах путем создания собственного хука. Тема для другого дня!
