react-performance
Оптимизация производительности React-приложения
React-приложения часто страдают от ненужных повторных рендеров и медленного отображения списков, что приводит к плохому пользовательскому опыту. Этот навык предоставляет экспертные паттерны для мемоизации, виртуализации, разделения кода и профилирования производительности для создания быстрых и отзывчивых React-приложений.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-performance”。 Этот компонент повторно рендерится, когда я ввожу текст в несвязанное поле ввода. Как это исправить?
预期结果:
Компонент повторно рендерится, потому что получает новый встроенный объект в качестве пропа при каждом рендере родителя. Оберните объект в useMemo или определите его вне компонента. Также убедитесь, что любые колбэк-пропы используют useCallback. Я могу помочь рефакторить родительский компонент для создания стабильных ссылок.
正在使用“react-performance”。 Помогите мне виртуализировать этот список из 1000 продуктов
预期结果:
Я реализую react-window FixedSizeList для вашего списка продуктов. Сначала я оберну каждый элемент продукта с помощью React.memo для предотвращения ненужных повторных рендеров. Затем я настрою контейнер виртуального списка с соответствующей высотой и размером элемента. Видимые элементы будут рендериться мгновенно при сохранении плавной прокрутки.
正在使用“react-performance”。 Мой бандл приложения весит 2МБ и загружается медленно. Что делать?
预期结果:
Я проанализирую ваши импорты и реализую разделение кода на основе маршрутов с использованием React.lazy. Большие библиотеки будут перемещены в отдельные чанки, загружаемые по требованию. Я также проверю наличие дублирующихся зависимостей и предложу динамические импорты для тяжёлых компонентов, таких как графики и редакторы, которые не видны сразу.
安全审计
安全All static findings are false positives from educational code examples. The skill contains legitimate React performance optimization patterns including lazy loading, Web Workers, and memoization techniques. No security concerns detected.
质量评分
你能构建什么
Оптимизация больших таблиц данных
Улучшение производительности отображения таблиц с тысячами строк путём реализации виртуализации и мемоизированных компонентов строк.
Исправление проблем производительности повторных рендеров
Выявление и устранение ненужных повторных рендеров компонентов с использованием инструментов профилирования и правильных техник мемоизации.
Уменьшение размера начального бандла
Реализация разделения кода на основе маршрутов и отложенной загрузки для сокращения времени начальной загрузки и улучшения метрик time-to-interactive.
试试这些提示
Review this React component and identify any unnecessary re-renders. Suggest specific memoization improvements.
I have a list rendering 500 items that scrolls slowly. Help me implement virtualization with react-window and optimize the item components.
Analyze my Zustand store usage and convert whole-store selectors to specific selectors to reduce re-renders.
Perform a complete performance audit of my React application. Check for memoization opportunities, bundle size issues, and suggest code splitting strategies. Include profiler analysis recommendations.
最佳实践
- Всегда профилируйте перед оптимизацией. Используйте React DevTools Profiler для выявления реальных узких мест, а не преждевременной оптимизации.
- Мемоизируйте компоненты и значения стратегически. Применяйте useMemo и useCallback только тогда, когда профилирование показывает измеримую выгоду, так как они добавляют накладные расходы.
- Используйте специфичные селекторы Zustand вместо выбора всего хранилища. Компоненты должны подписываться только на те срезы состояния, которые им нужны.
避免
- Обёртывание каждого компонента с помощью React.memo без профилирования. Это добавляет ненужные накладные расходы на сравнение для компонентов, которые рендерятся нечасто или с изменяющимися пропами.
- Мемоизация простых примитивных операций, таких как конкатенация строк или базовая арифметика. Накладные расходы на мемоизацию превышают стоимость вычислений.
- Использование встроенных объектов или функций в качестве пропов для мемоизированных дочерних элементов. Это сводит на нет мемоизацию, потому что новые ссылки создаются при каждом рендере.