use no memo
"use no memo" предотвращает оптимизацию функции компилятором React.
Справочник
"use no memo"
Добавьте "use no memo" в начало функции, чтобы предотвратить её оптимизацию компилятором React.
function MyComponent() {
"use no memo";
// ...
} Если функция содержит "use no memo", компилятор React полностью пропустит её при оптимизации. Это полезный временный способ отключить оптимизацию при отладке или при работе с кодом, который некорректно работает с компилятором.
Ограничения
-
"use no memo"должна находиться в самом начале тела функции, до любых импортов и другого кода (комментарии допустимы). - Директива должна быть записана в одинарных или двойных кавычках, не в обратных.
- Директива должна в точности совпадать с
"use no memo"или её псевдонимом"use no forget". - Эта директива имеет приоритет над всеми режимами компиляции и другими директивами.
- Она предназначена для временной отладки, а не для постоянного использования.
Как "use no memo" отключает оптимизацию
Компилятор React анализирует код во время сборки, чтобы применить оптимизации. "use no memo" задаёт явную границу, указывая компилятору полностью пропустить функцию.
Эта директива имеет приоритет над всеми остальными настройками:
- В режиме
all: функция пропускается, несмотря на глобальную настройку - В режиме
infer: функция пропускается, даже если эвристики оптимизировали бы её
Компилятор обрабатывает эти функции так, как если бы компилятор React не был включён, оставляя их в точности такими, какими они написаны.
Когда использовать "use no memo"
"use no memo" следует использовать редко и временно. Типичные сценарии:
Отладка проблем компилятора
Если вы подозреваете, что проблемы вызваны компилятором, временно отключите оптимизацию, чтобы локализовать их:
function ProblematicComponent({ data }) {
"use no memo"; // TODO: Remove after fixing issue #123
// Rules of React violations that weren't statically detected
// ...
} Интеграция со сторонними библиотеками
При интеграции с библиотеками, которые могут быть несовместимы с компилятором:
function ThirdPartyWrapper() {
"use no memo";
useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
// ...
} Использование
Директива "use no memo" размещается в начале тела функции, чтобы компилятор React не оптимизировал эту функцию:
function MyComponent() {
"use no memo";
// Function body
} Директиву также можно разместить в начале файла, чтобы она влияла на все функции в этом модуле:
"use no memo";
// All functions in this file will be skipped by the compiler "use no memo" на уровне функции переопределяет директиву на уровне модуля.
Решение проблем
Директива не предотвращает компиляцию
Если "use no memo" не работает:
// ❌ Wrong - directive after code
function Component() {
const data = getData();
"use no memo"; // Too late!
}
// ✅ Correct - directive first
function Component() {
"use no memo";
const data = getData();
} Также проверьте:
- Написание — должно в точности совпадать с
"use no memo" - Кавычки — используйте одинарные или двойные кавычки, а не обратные
Рекомендации
Всегда документируйте причину, по которой вы отключаете оптимизацию:
// ✅ Good - clear explanation and tracking
function DataProcessor() {
"use no memo"; // TODO: Remove after fixing rule of react violation
// ...
}
// ❌ Bad - no explanation
function Mystery() {
"use no memo";
// ...
} См. также
-
"use memo"— Включение компиляции - Компилятор React — Руководство по началу работы
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-compiler/directives/use-no-memo