В React 16.8 представлен новый шаблон под названием Hooks для обработки состояния и других функций React с использованием функционального компонента. До версии React 16.8 разработчики могли обрабатывать состояние и жизненные циклы только с помощью компонентов класса.
Хуки позволяют всегда использовать функции вместо переключения между функциями, классами, HOC и реквизитами рендеринга.
Лучший способ начать работу с хуками React — научиться их использовать. В этой статье я поделюсь «что вы должны и не должны делать при использовании хуков», чтобы избежать какой-либо неопределенности. и в конце я добавил еще несколько моментов, чтобы помочь вам понять поддержку Hook в сторонних библиотеках.
1. Следуйте правилам хука
Всегда используйте хуки на верхнем уровне вашей функции React
- Не вызывайте хуки внутри циклов, условий или вложенных функций.
2. Всегда используйте крючки перед любым ранним возвратом.
3. Хуки вызываются в одном и том же порядке при каждом рендере.
Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента. Это позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect.
Не вызывайте хуки из обычных функций JavaScript.
Вместо:
1. вы можете вызывать хуки из функциональных компонентов React
2. вы можете вызывать хуки из пользовательских хуков
2. Пользовательские имена хуков должны начинаться с «use", за которой следует заглавная буква.
например, useState (встроенный) или useUserStatus, это очень важно. Без него React не сможет автоматически проверять нарушения Rules of Hook.
3. Используйте подключаемый модуль ESLint под названием eslint-plugin-react-hooks для обеспечения соблюденияправил хуков.
Чтобы настроить его в своем проекте, следуйте инструкциям, приведенным ниже.
Предполагая, что у вас уже установлен ESLint, запустите:
# npm npm install eslint-plugin-react-hooks --save-dev # yarn yarn add eslint-plugin-react-hooks --dev
Затем расширьте рекомендуемую конфигурацию eslint:
{
"extends": [
// ...
"plugin:react-hooks/recommended"
]
}
Для пользовательской/расширенной конфигурации следуйте инструкциям, указанным здесь eslint-plugin-react-hooks.
Примечание. Этот подключаемый модуль по умолчанию включен в Создать приложение React.
4. Вы не можете использовать хуки внутри компонента класса,
но вы определенно можете смешивать классы и функциональные компоненты с хуками в одном и том же проекте.
5. Состояние и эффекты внутри Custom Hooks полностью изолированы.
Два компонента, использующие один и тот же хук, не могут иметь общие состояния и эффекты. но вы можете передавать информацию между хуками.
Если вы зашли так далеко, большое спасибо за чтение моего поста, вот несколько бонусных баллов для вас
- Варианты использования, связанные с componentDidMount, componentDidUpdate, componentWillUnmount, могут быть покрыты useEffect Hook
2. Пока нет хука для покрытия жизненных циклов getSnapshotBeforeUpdate, getDerivedStateFromError и componentDidCatch.
3. Поддержка хуков добавлена в React Redux начиная с версии 7.1.0.
4. React Router поддерживает хуки начиная с версии 5.1.
Я надеюсь, что эта статья помогла вам изучить правила React Hooks и научиться правильно их использовать. Если вам понравилась эта статья, оцените использование кнопки 👏. И подпишитесь на меня, чтобы получать больше статей о React, React Native, JavaScript и разработке программного обеспечения.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
