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

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

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

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

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

Распространенные причины сбоев

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

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

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

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

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

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

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

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

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

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

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

function ProblematicComponent() {
  «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, чтобы предотвратить проблемы
• Ознакомьтесь с руководством по постепенному внедрению для стратегий постепенного внедрения