Привет всем, сегодня мы поговорим о React Hooks и нескольких простых шаблонах, которым нужно следовать, которые могут сделать ваш код намного чище, читабельнее, а повседневную работу веселее! :)
Итак, год и несколько месяцев назад команда React выпустила хуки в стабильную версию, и постепенно в это время все больше и больше библиотек с открытым исходным кодом, а компании и программисты начали медленно переходить от компонентов классов к компонентам функций, также известным как хуки.
На первый взгляд функциональные компоненты кажутся довольно простыми, потому что это почти как компоненты класса, но без класса и только с функцией рендеринга, верно? Но постепенно люди узнают о небольших различиях и деталях, из-за которых они пишут менее эффективный и менее читаемый код React, поэтому давайте рассмотрим эти ловушки и узнаем, как их избежать.
Итак, давайте начнем с самого простого и продвинемся вперед.
Использование хуков
- Всегда инициализируйте / вызывайте хуки в верхней части ваших функций, людям будет намного легче понять, в каком состоянии находится ваш компонент.
- Хуки зависят от порядка используемых вами хуков, и из-за этого вы не можете помещать хуки в условные термины.
- Вы можете узнать больше об этом в документации React - https://reactjs.org/docs/hooks-rules.html#explanation
Реквизит Разборка
По возможности старайтесь использовать деконструкцию, это сделает компоненты функций более читабельными, и люди сразу поймут, что вы используете в компоненте.
Понимание жизненного цикла функционального компонента
Самый простой способ подумать об этом - это то, что функциональный компонент - это только часть визуализации компонента класса, и, если вы не используете хуки, наиболее вероятно, что при каждой повторной визуализации компонента все переменные, функции и данные будут воссозданы.
крючок useEffect
Этот хук, как следует из названия, используется для создания эффектов, таких как выполнение вызовов API, журналирование и другие побочные эффекты, которые вам нужны. Постарайтесь как можно больше сохранить свои побочные эффекты внутри useEffect и используйте по 1 для каждого побочного эффекта / беспокойства.
useCallback хук
Как мы видели ранее, каждая функция воссоздается заново при каждом рендеринге, так что мы можем сделать, если хотим этого избежать? useCallback. С помощью этого хука мы можем сказать нашему компоненту, чтобы он не воссоздавал функцию заново при каждом рендеринге, это полезно, когда мы хотим, чтобы функция создавалась только один раз, и если там задействовано состояние, также небольшая ошибка, которую я видел, это ReactMemне работает из-за ссылки на постоянно воссоздаемые функции.
массив зависимостей useEffect / useCallback
Что важно учитывать при использовании обоих этих хуков, для каждого из них требуется массив зависимостей в качестве второго аргумента.
Это почему? React должен знать, какие значения следует отслеживать, чтобы вы не получили устаревшие данные, React будет запускать эти хуки только при изменении значений, переданных внутри массива зависимостей, а если вы передадите массив [], он запустит его только один раз.
В левом примере ниже без передачи count в массив зависимостей он всегда будет равен 0, в отличие от правого примера, в котором мы передаем правую зависимость и получаем последнее значение.
Извлечение функций, не связанных с реакцией за пределами функционального компонента
Это может показаться очень тривиальным, но иногда новички в реагировании на хуки не полностью знают, могут ли они извлекать некоторые функции за пределами компонента или нет, поэтому они придерживаются размещения целого набора функций внутри функционального компонента, и мы получаем огромный функциональный компонент, который является действительно трудно читать!
Изящное решение - просто извлечь всю функциональность, не имеющую отношения к React, это поможет нам сохранить компонент действительно тонким и читаемым, а также упростит тестирование этой логики.
злоупотребление useRef
React представил ловушку useRef, поэтому мы можем использовать ссылки внутри функциональных компонентов, но также позволил нам хранить изменяемые данные на нем для всех жизненных циклов компонентов, поэтому иногда люди склонны избегать использования useState или хранения всех своих данных сuseRef (конечно, есть крайние случаи для данных :)). Я бы посоветовал подумать о лучшем решении или другом способе решения вашей проблемы, а не сразу переходить к useRef.
Основные способы использования, заявленные командой React (в большинстве случаев следует использовать для- https://reactjs.org/docs/refs-and-the-dom.html):
Когда использовать ссылки
Есть несколько хороших вариантов использования рефов:
Управление фокусом, выделением текста или воспроизведением мультимедиа.
Запуск императивных анимаций.
Интеграция со сторонними библиотеками DOM.
Подводя итог, эти моменты должны помочь вам получить более приятный опыт работы с хуками реакции, конечно, все это действительно на высоком уровне, и по каждому предмету мы можем погрузиться гораздо больше. Я предлагаю прочитать официальную документацию React по этому поводу, которая доступна здесь: https://reactjs.org/docs/hooks-intro.html.
Поскольку изображения иногда трудно увидеть, а суть внутри носителя для меня не работает, я создал репозиторий, чтобы показать примеры более наглядно:
