Отладка и устранение неполадок

Это руководство поможет вам выявлять и исправлять проблемы при использовании React Compiler. Узнайте, как отлаживать проблемы компиляции и решать распространённые неполадки.

Понимание поведения компилятора

React Compiler предназначен для обработки кода, который следуетПравилам React. Когда он сталкивается с кодом, который может нарушать эти правила, он безопасно пропускает оптимизацию, а не рискует изменить поведение вашего приложения.

Ошибки компилятора vs Проблемы времени выполнения

Ошибки компиляторавозникают во время сборки и препятствуют компиляции вашего кода. Они редки, потому что компилятор спроектирован так, чтобы пропускать проблемный код, а не завершаться с ошибкой.

Проблемы времени выполнениявозникают, когда скомпилированный код ведёт себя иначе, чем ожидалось. В большинстве случаев, если вы столкнулись с проблемой в React Compiler, это проблема времени выполнения. Обычно это происходит, когда ваш код нарушает Правила React в тонких аспектах, которые компилятор не смог обнаружить, и компилятор ошибочно скомпилировал компонент, который должен был пропустить.

При отладке проблем времени выполнения сосредоточьтесь на поиске нарушений Правил React в затронутых компонентах, которые не были обнаружены правилом ESLint. Компилятор полагается на то, что ваш код следует этим правилам, и когда они нарушены способами, которые он не может обнаружить, возникают проблемы времени выполнения.

Распространённые нарушающие паттерны

Один из основных способов, которым React Compiler может сломать ваше приложение, — это если ваш код был написан с расчётом на мемоизацию для корректности. Это означает, что ваше приложение зависит от мемоизации определённых значений для правильной работы. Поскольку компилятор может мемоизировать иначе, чем ваш ручной подход, это может привести к неожиданному поведению, такому как чрезмерное срабатывание эффектов, бесконечные циклы или пропущенные обновления.

Распространённые сценарии, в которых это происходит:

• Эффекты, зависящие от ссылочного равенства— когда эффекты зависят от того, что объекты или массивы сохраняют одну и ту же ссылку между рендерами
• Массивы зависимостей, требующие стабильных ссылок— когда нестабильные зависимости вызывают слишком частое срабатывание эффектов или создают бесконечные циклы
• Условная логика, основанная на проверке ссылок— когда код использует проверку ссылочного равенства для кэширования или оптимизации

Рабочий процесс отладки

Выполните следующие шаги при возникновении проблем:

Ошибки сборки компилятора

Если вы столкнулись с ошибкой компилятора, которая неожиданно ломает вашу сборку, скорее всего, это ошибка в самом компиляторе. Сообщите о ней в репозиторийfacebook/react, указав:

• Сообщение об ошибке
• Код, вызвавший ошибку
• Ваши версии React и компилятора

Проблемы времени выполнения

Для проблем с поведением во время выполнения:

1. Временно отключите компиляцию

Используйте"use no memo", чтобы определить, связана ли проблема с компилятором:

Если проблема исчезает, скорее всего, она связана с нарушением Правил React.

Вы также можете попробовать удалить ручную мемоизацию (useMemo, useCallback, memo) из проблемного компонента, чтобы убедиться, что ваше приложение работает корректно без какой-либо мемоизации. Если ошибка всё ещё возникает после удаления всей мемоизации, у вас есть нарушение Правил React, которое нужно исправить.

2. Исправляйте проблемы шаг за шагом

1. Определите первопричину (часто это мемоизация для корректности)
2. Тестируйте после каждого исправления
3. Удалите"use no memo"после исправления
4. Убедитесь, что компонент отображает значок ✨ в React DevTools

Сообщение об ошибках компилятора

Если вы считаете, что нашли ошибку в компиляторе:

1. Убедитесь, что это не нарушение Правил React- Проверьте с помощью ESLint
2. Создайте минимальный воспроизводимый пример- Изолируйте проблему в небольшом примере
3. Протестируйте без компилятора- Подтвердите, что проблема возникает только при компиляции
4. Создайтеотчёт об ошибке:
   • Версии React и компилятора
   • Минимальный воспроизводимый код
   • Ожидаемое и фактическое поведение
   • Любые сообщения об ошибках

Следующие шаги

• Ознакомьтесь сПравилами React, чтобы предотвратить проблемы
• Ознакомьтесь сруководством по постепенному внедрениюдля стратегий поэтапного развёртывания