React Hooks быстро стала рекомендуемым способом обработки компонентов локального состояния и побочных эффектов в компонентах функции React. Начало работы с крючками довольно просто, но вам, возможно, придется изменить то, как вы думаете о своих компонентах, особенно когда речь идет о крючке использования.
В этом блоге предполагается, что вы знаете основы React Hooks – если вы этого не сделаете Вы можете узнать больше здесь – и будет немного глубже в то, как их следует использовать. Я также немного расскажу об ошибках, которые мы совершили, и о том, как нам потребовалось почти месяц, чтобы исправить беспорядок.
React Hooks – Легко учиться, трудно освоить
Реакционные крючки были запущены в React версии 16.8, и они быстро стали популярным способом обработки компонентов, местных состояний и побочных эффектов компонентов, среди прочего. С ними довольно легко начать, но они сложны правильно освоить – вы должны научиться мыслить немного по -другому по сравнению с традиционными классовыми компонентами React и крючками жизненного цикла, и есть определенные правила, которым вы должны следовать.
Некоторые примеры крючков и как их использовать
Самый простой крючок – это крюк Usestate, который принимает в качестве аргумента исходное состояние. Usestate – это функция, которая возвращает массив с двумя элементами в нем: первое – это фактическое состояние, а второе – функция, которая устанавливает состояние. Другим встроенным крючком является использование, которое предназначено для выполнения побочных эффектов в ваших компонентах функции React. Например, если у вас есть корзина для покупок с кнопкой для добавления банана, когда добавляется банан, вы можете обновить заголовок документа как побочный эффект. С помощью использования, вы определяете зависимости – вы можете думать об этом, например, определение массива и как часто вы хотите выполнять функцию. Если вы оставите его в виде пустого массива, он будет работать только один раз, после первоначального рендера; В противном случае он будет работать после каждого визуализации функции, если вы не определите зависимости. Итак, когда состояние меняется, React просто вызывает эту функцию снова. И из функции использования, вы можете вернуть функцию очистки.
Чтобы понять очистку использования, попробуйте эту аналогию из Райан Флоренс Анкет Представьте, что у вас есть только одна миска в вашем доме, чтобы съесть хлопья. Вы просыпаетесь утром и едите хлопья, будь вы голодными или нет – это первоначальный рендер. Время проходит, государство меняется, и вы снова становитесь голодными. Теперь вам нужно почистить миску, потому что она грязная с тех пор, как вы ели раньше. Сначала вы очищаете его, а затем снова едите – это то же самое, что React, выполняя очистку, прежде чем снова запустить эффект, поэтому, когда компонент размер, он пропускает очистку при удалении.
Легкие ошибки, чтобы сделать с помощью крючков React
Я только что упомянул два самых важных крючка, но давайте немного поговорим о типичных ошибках с крючками. Первая ошибка, которую вы можете совершить, когда начнете использовать использование Effect, заключается в том, что вы можете добавить массив зависимостей, а это означает, что ваш эффект будет работать на каждом рендеринге. Почему это проблема? Представьте себе, что вы делаете в своем эффективности использования. Это произойдет на каждом рендере, что вызывает новый рендерин, потому что что -то меняло состояние компонента. Это сделало бы его снова, вызывая бесконечную петлю. Еще одна типичная ошибка, которую вы можете совершить, когда вы начинаете рефакторировать использование, – это использование, которое зависит от состояния, которое сохраняется внутри него. Это вызывает еще одну бесконечную петлю, но вы можете решить его, выполняя функциональные обновления состояния вместо традиционных вызовов пользователя.
Правила следовать – и что происходит, когда не
Самое простое правило состоит в том, что крючки должны начинаться с “использовать” – Я думаю, что React даже предупредит вас, если вы попытаетесь сделать что -то, что не начинается с использования. Затем, вызовы крючки следует использовать только на верхнем уровне ваших функциональных компонентов, поэтому вы не можете гнездя их в операторах. Это связано с тем, что React опирается только на порядок вызовов крючков, поэтому для каждого рендера вы должны вызывать одинаковое количество крючков, чтобы React знал, какой крюк какой. Наконец, вы можете вызвать только крючки из функций React. Это, вероятно, должно быть самопроясняющим, но когда я начал использовать крючки, я хотел использовать их в некоторых функциях утилиты, и я быстро понял, что это просто невозможно. Eslint очень полезен для проверки этих правил. Есть два плагина, которые я могу порекомендовать: React-Hooks/Rules of-Hooks и реагирующие кунгус/исчерпывающие-депсионы Анкет
Так где же мы ошиблись? В начале проекта мы использовали TSLINT вместо Eslint, потому что в этот момент TSLINT еще не устарел, поэтому мы подумали, что все будет хорошо. У нас был установлен и включен плагин React Hooks, но по какой -то причине мы забыли включить правила React Hooks, поэтому TSLINT на самом деле не проверял правила. У нас было это там в течение нескольких месяцев и не заметили, и, поскольку мы недостаточно хорошо знали правила, мы не заметили, что наш код накапливается в огромном беспорядке.
В этот момент мы перешли от TSLINT на Eslint, который уже был большим рефакторингом, потому что мы также сделали наши правила более строгими. Сначала у нас было отключено исчерпывающее правило DEPS после рефакторинга, а также один огромный компонент, в котором нам пришлось добавить линию Eslint «Отключить правила крюков React», потому что файл был слишком большим, чтобы быть исправленным в этом PR. А потом я начал исправлять этот беспорядок, позволил исчерпывающему правилу DEPS и решил просто сделать то, что говорит нам Эслинт. Я думал, что это займет у меня пару дней, в конечном итоге потребовалось более месяца, чтобы исправить только исчерпывающие нарушения, в том числе вызвать некоторые регрессии в производстве.
Уроки, извлеченные с React
Самое важное, что мы узнали, – это сделать это просто, как в вашей базе, так и в крючках. Даже если вы можете сделать огромные эффекты, лучше разделить их на множество эффектов – и если это делает ваш код компонента выглядеть безобразным, вы можете абстрагировать его в нестандартный крючок. Во -вторых, вы всегда должны включать правила Eslint и применять их, и лучше всего иметь Eslint в вашем редакторе. В этот момент я также хотел бы порекомендовать Betherer – Клаучный инструмент, который можно использовать в устаревших проектах и в более крупных, текущих проектах, чтобы не ухудшить проект с течением времени. Вы добавляете тесты, которые убедитесь, что вы перестаете делать неправильные вещи, и заставляет вас добиться большего успеха в будущем. Это удобно, когда у вас нет времени, энергии или ресурсов для такого рода огромных PRS.
Я также узнал, что пользовательские крючки довольно крутые. Они являются действительно полезным способом обмена кодом и логикой между компонентами. И во время этого рефакторинга я узнал, когда использовать пользовательский индекс и когда использовать Usestate. USESTATE – это нормально, но если у вас есть больше, чем, скажем, три пользователя, и вам нужно изменить несколько из них одновременно, но они полагаются друг на друга, тогда лучше использовать пользовательский обретчик с одним объектом штата, а затем отправьте Действия, которые обновляют состояние.
Где узнать больше о реагировании и реагировать крючки
Если вы хотите узнать больше о крючках и правилах крючков, официальные документы React потрясающие – они объясняют правила и почему вы должны следовать за ними. Если бы я прочитал их для начала, я бы не допустил ошибок, которые я сделал! Я также рекомендую взглянуть на блог Дэна Абрамова, слишком отреагировал.io Анкет Полное руководство по использованию Интересно, как это Реагировать как время выполнения пользовательского интерфейса и Чем функциональные компоненты отличаются от классов научит вас некоторым важным различиям.
Этот блог был основан на одном из моих Технические недели разговоры. Вы можете послушать Полный эпизод здесь Анкет
Оригинал: “https://dev.to/futurice/the-rules-of-react-hooks-and-how-we-messed-up-4015”