compilationMode

{
  compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
}

• Справочник
  • compilationMode
• Использование
  • Режим вывода по умолчанию
  • Поэтапное внедрение с режимом аннотаций
  • Использование синтаксиса Flow
  • Исключение отдельных функций
• Устранение неполадок
  • Компонент не компилируется в режиме вывода

Справочник

compilationMode

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

Тип

'infer' | 'syntax' | 'annotation' | 'all'

Значение по умолчанию

'infer'

Параметры

• 'infer' (по умолчанию): компилятор использует интеллектуальные эвристики для распознавания React-компонентов и хуков:

  • Функции, явно помеченные директивой "use memo"
  • Функции с именами в стиле компонентов (PascalCase) или хуков (префикс use), которые создают JSX и/или вызывают другие хуки

• 'annotation': компилируются только функции, явно помеченные директивой "use memo". Идеально подходит для поэтапного внедрения.

• 'syntax': компилируются только компоненты и хуки, использующие синтаксис Flow для компонентов и хуков.

• 'all': компилируются все функции верхнего уровня. Не рекомендуется, поскольку могут компилироваться функции, не относящиеся к React.

Особенности

• В режиме 'infer' функции должны соответствовать соглашениям React об именовании, чтобы их можно было обнаружить
• Использование режима 'all' может ухудшить производительность из-за компиляции вспомогательных функций
• Для режима 'syntax' требуется Flow; он не работает с TypeScript
• Независимо от режима функции с директивой "use no memo" всегда пропускаются

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

Режим вывода по умолчанию

Режим 'infer' по умолчанию хорошо подходит для большинства кодовых баз, следующих соглашениям React:

{
  compilationMode: 'infer'
}

В этом режиме будут компилироваться следующие функции:

// ✅ Compiled: Named like a component + returns JSX
function Button(props) {
  return <button>{props.label}</button>;
}

// ✅ Compiled: Named like a hook + calls hooks
function useCounter() {
  const [count, setCount] = useState(0);
  return [count, setCount];
}

// ✅ Compiled: Explicit directive
function expensiveCalculation(data) {
  "use memo";
  return data.reduce(/* ... */);
}

// ❌ Not compiled: Not a component/hook pattern
function calculateTotal(items) {
  return items.reduce((a, b) => a + b, 0);
}

Поэтапное внедрение с режимом аннотаций

Для постепенного перехода используйте режим 'annotation', чтобы компилировать только помеченные функции:

{
  compilationMode: 'annotation'
}

Затем явно пометьте функции, которые нужно компилировать:

// Only this function will be compiled
function ExpensiveList(props) {
  "use memo";
  return (
    <ul>
      {props.items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// This won't be compiled without the directive
function NormalComponent(props) {
  return <div>{props.content}</div>;
}

Использование синтаксиса Flow

Если в вашей кодовой базе используется Flow вместо TypeScript:

{
  compilationMode: 'syntax'
}

Затем используйте синтаксис компонентов Flow:

// Compiled: Flow component syntax
component Button(label: string) {
  return <button>{label}</button>;
}

// Compiled: Flow hook syntax
hook useCounter(initial: number) {
  const [count, setCount] = useState(initial);
  return [count, setCount];
}

// Not compiled: Regular function syntax
function helper(data) {
  return process(data);
}

Исключение отдельных функций

Независимо от режима компиляции, используйте "use no memo", чтобы пропустить компиляцию:

function ComponentWithSideEffects() {
  "use no memo"; // Prevent compilation

  // This component has side effects that shouldn't be memoized
  logToAnalytics('component_rendered');

  return <div>Content</div>;
}

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

Компонент не компилируется в режиме вывода

В режиме 'infer' убедитесь, что компонент соответствует соглашениям React:

// ❌ Won't be compiled: lowercase name
function button(props) {
  return <button>{props.label}</button>;
}

// ✅ Will be compiled: PascalCase name
function Button(props) {
  return <button>{props.label}</button>;
}

// ❌ Won't be compiled: doesn't create JSX or call hooks
function useData() {
  return window.localStorage.getItem('data');
}

// ✅ Will be compiled: calls a hook
function useData() {
  const [data] = useState(() => window.localStorage.getItem('data'));
  return data;
}