react-patterns
Освойте паттерны и лучшие практики разработки на React
Создавайте готовые к продакшену React-приложения с уверенностью. Изучите проверенные паттерны для хуков, управления состоянием и проектирования компонентов.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «react-patterns». Когда следует использовать Context вместо глобального хранилища, такого как Zustand?
Ожидаемый результат:
Используйте Context для локального общего состояния внутри поддерева компонентов, например, для темы или локали. Используйте Zustand для общеприложенного состояния, которое требует devtools, персистентности или доступно во многих несвязанных компонентах. Context встроен, но может вызывать повторные рендеры; Zustand предлагает лучшую производительность для частых обновлений.
Использование «react-patterns». Нужен ли этот useEffect для получения данных при монтировании?
Ожидаемый результат:
В React 19 предпочитайте серверные компоненты или библиотеки для получения данных, такие как React Query, вместо useEffect для получения данных. useEffect подходит для подписок или побочных эффектов, не связанных с данными. Для данных используйте библиотеки, которые автоматически обрабатывают кэширование, дедупликацию и состояния ошибок.
Аудит безопасности
БезопасноAll 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.
Оценка качества
Что вы можете построить
Адаптация React-разработчиков
Помогите новым членам команды быстро изучить паттерны архитектуры React и стандарты кодирования вашей команды.
Руководство по рефакторингу компонентов
Получите рекомендации по разбиению крупных компонентов и применению правильных паттернов хуков.
Выбор управления состоянием
Определите правильное решение для состояния от useState до глобальных хранилищ в соответствии с вашими потребностями.
Попробуйте эти промпты
Объясните, когда следует извлекать пользовательский хук в React. Покажите паттерн useLocalStorage с примером кода.
Просмотрите этот React-компонент и предложите улучшения на основе принципов проектирования компонентов. Определите, следует ли разделить его на более мелкие компоненты.
У меня есть приложение с аутентификацией пользователей, настройками темы и уведомлениями в реальном времени. Порекомендуйте подход к управлению состоянием и объясните почему.
Объясните, как компилятор React 19 влияет на паттерны мемоизации. Покажите, какие вызовы useMemo и useCallback можно удалить.
Лучшие практики
- Профилируйте производительность перед оптимизацией — сначала измерьте реальные узкие места
- Предпочитайте композицию наследованию — создавайте небольшие сфокусированные компоненты
- Используйте стабильные уникальные ключи вместо индексов массива для рендеринга списков
Избегать
- Глубокая передача props через множество уровней — используйте вместо этого Context или композицию компонентов
- Огромные компоненты с множеством обязанностей — разделяйте на более мелкие единицы
- Использование useEffect для всего — применяйте серверные компоненты там, где это уместно