Директивы

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

• Обзор
  • Доступные директивы
  • Краткое сравнение
• Использование
  • Директивы на уровне функции
  • Директивы на уровне модуля
  • Взаимодействие с режимами компиляции
• Рекомендации
  • Используйте директивы умеренно
  • Документируйте использование директив
  • Заранее планируйте удаление
• Типичные шаблоны
  • Постепенное внедрение
• Устранение неполадок
  • Распространённые проблемы
• См. также

Обзор

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

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

• "use memo" — включает функцию в компиляцию
• "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";
  // ...
}

Заранее планируйте удаление

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

1. Добавьте директиву и комментарий TODO
2. Создайте задачу для отслеживания
3. Устраните основную проблему
4. Удалите директиву

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
  // ...
}

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

Информацию об устранении конкретных проблем с директивами см. в соответствующих разделах:

• Устранение неполадок с "use memo"
• Устранение неполадок с "use no memo"

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

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

См. также

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