Перехватчики React появились чуть больше месяца назад, когда я писал эту статью. Из своего месячного опыта использования и написания хуков я обнаружил, что хуки - очень мощная абстракция - возможно, даже слишком мощная. Как говорится, с большой властью приходит большая ответственность; и эта статья посвящена тому, как эффективно начать мыслить хуками, и охватывает проверенные в боях передовые практики, накопленные за все время их существования при написании собственных компонентов React с хуками.
Примечание. В этой статье предполагается, что вы знаете хуки и способы их использования. Прочтите документацию, если вам нужно что-то напомнить (https://reactjs.org/docs/hooks-intro.html)
⚓ Мыслить крючками ⚓
Одна из вещей, которые мне нравятся в классических компонентах, - это идея инкапсуляции. Все, что относится к классическому компоненту, будет заключено в фигурные скобки, следующие за ключевым словом class. Перехватчики жизненного цикла: constructor, componentDidMount, render и т. Д. Придают компонентам предсказуемую структуру, которая делает организацию кода безумной и, в общем, предсказуемой. (правило наименьшей силы в игре)
С помощью хуков состав компонента в корне меняется от конгломерата крючков жизненного цикла к простой регистрации / подтверждению функциональности plug-n-play с некоторым рендерингом в конце.
Глядя на приведенный выше пример хуков, вы можете спросить себя: «Что делает useHook?» Ответ: ну что угодно.
useHook может подписывать компонент на различные побочные эффекты, создавать экземпляры переменных состояния, контексты потребления или все вышеперечисленное, если вы используете настраиваемый обработчик! Это приводит к передовой практике нет. 1…
1. Держите крючки простыми
Если вы можете избежать написания пользовательских хуков - это в лучших интересах вашего разработчика кода. Миксины считались вредными в немалой степени из-за того, что они позволяли запутывать и часто жесткие абстракции для часто тривиальных функций. Если вы можете встроить useState или useEffect вместо того, чтобы создавать и использовать свой собственный хук, сделайте это простым и сделайте это. Не будьте тем разработчиком, который доводит DRY до крайности. Предпочитайте простые крючки.
2. Держите крючки организованными.
Следуйте порядку жизненного цикла классического компонента - сначала выполните вычисления, создайте экземпляр своего состояния, подпишитесь на свои побочные эффекты, настройте обработчики событий и, наконец, выполните рендеринг в указанном порядке.
«Https://github.com/airbnb/javascript/tree/master/react#orderin сексg
Сохранение функционального компонента, организованного таким же образом, как и классического компонента, способствует удобочитаемости и сохраняет последовательность и предсказуемость потока ваших компонентов.
3.2 Значения по умолчанию ES6 ›defaultProps (особенно для пользователей Typescript и Flow)
При использовании средства проверки типов меня беспокоит то, что «required» опора не обязательно является обязательной, поскольку с ней может быть связано значение defaultProp.
Это раздражение при проверке типов связано с природой defaultProp. Поскольку defaultProp оценивается во время выполнения, его нельзя учитывать при статической проверке типов.
Использование значений по умолчанию ES6 устраняет эту проблему, поскольку значения по умолчанию определены статически. Со значениями по умолчанию ES6 ваши типы свойств будут правильно отражать то, что является необязательным, а что требуется.
4. Наконец, не торопитесь
Хуки по-прежнему являются относительно новой технологией, а экосистема и сообщество еще не полностью сформированы - за пределами этой статьи передовые практики еще не полностью определены, поэтому следует принимать меры предосторожности, которые можно было бы предпринять при принятии любой ранней технологии. Имея в виду эту мудрость, хуки - это путь будущего для React, и я надеюсь, что эта статья поможет вам в ваших приключениях с кодом, подпитываемым хуками!
