Директивы¶

Директивы React Compiler - это специальные строковые литералы, которые управляют тем, компилируются ли отдельные функции.

function MyComponent() {
  "use memo"; // Opt this component into compilation
  return <div>{/* ... */}</div>;
}

Обзор¶

Директивы React Compiler дают точечный контроль над тем, какие функции оптимизирует компилятор. Это строковые литералы, которые ставятся в начало тела функции или в начало модуля.

Доступные директивы¶

"use memo" - включает функцию в компиляцию
"use no memo" - исключает функцию из компиляции

Краткое сравнение¶

Директива	Назначение	Когда использовать
`"use memo"`	Принудительная компиляция	В режиме `annotation` или чтобы переопределить эвристики режима `infer`
`"use no memo"`	Запрет компиляции	Отладка проблем или работа с несовместимым кодом

Использование¶

Директивы на уровне функции¶

Поставьте директиву в начало функции, чтобы управлять её компиляцией:

// Opt into compilation
function OptimizedComponent() {
  "use memo";
  return <div>This will be optimized</div>;
}

// Opt out of compilation
function UnoptimizedComponent() {
  "use no memo";
  return <div>This won't be optimized</div>;
}

Директивы на уровне модуля¶

Поставьте директиву в начало файла, чтобы она действовала на все функции модуля:

// At the very top of the file
"use memo";

// All functions in this file will be compiled
function Component1() {
  return <div>Compiled</div>;
}

function Component2() {
  return <div>Also compiled</div>;
}

// Can be overridden at function level
function Component3() {
  "use no memo"; // This overrides the module directive
  return <div>Not compiled</div>;
}

Взаимодействие с режимами компиляции¶

Директивы ведут себя по-разному в зависимости от compilationMode:

Режим annotation: компилируются только функции с "use memo"
Режим infer: компилятор сам решает, что компилировать, а директивы переопределяют его решения
Режим all: компилируется всё, а "use no memo" может исключить отдельные функции

Рекомендации¶

Используйте директивы умеренно¶

Директивы - это лазейки. Предпочитайте настраивать компилятор на уровне проекта:

// ✅ Good - project-wide configuration
{
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'infer'
    }]
  ]
}

// ⚠️ Use directives only when needed
function SpecialCase() {
  "use no memo"; // Document why this is needed
  // ...
}

Документируйте использование директив¶

Всегда объясняйте, зачем используется директива:

// ✅ Good - clear explanation
function DataGrid() {
  "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123)
  // Complex grid implementation
}

// ❌ Bad - no explanation
function Mystery() {
  "use no memo";
  // ...
}

Планируйте удаление¶

Директивы исключения должны быть временными:

Добавьте директиву с комментарием TODO
Создайте задачу для отслеживания
Исправьте исходную проблему
Удалите директиву

function TemporaryWorkaround() {
  "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0
  return <ThirdPartyComponent />;
}

Распространённые шаблоны¶

Постепенное внедрение¶

При внедрении React Compiler в большую кодовую базу:

// Start with annotation mode
{
  compilationMode: 'annotation'
}

// Opt in stable components
function StableComponent() {
  "use memo";
  // Well-tested component
}

// Later, switch to infer mode and opt out problematic ones
function ProblematicComponent() {
  "use no memo"; // Fix issues before removing
  // ...
}

Устранение неполадок¶

По конкретным проблемам с директивами смотрите разделы устранения неполадок:

Типичные проблемы¶

Директива игнорируется: проверьте расположение (должна быть первой) и написание
Компиляция всё равно происходит: проверьте параметр ignoreUseNoForget
Директива модуля не работает: убедитесь, что она стоит перед всеми импортами

См. также¶

compilationMode - как компилятор выбирает, что оптимизировать
Конфигурация - все параметры конфигурации компилятора
Документация React Compiler - руководство по началу работы

Источник — https://react.dev/reference/react-compiler/directives