react/globals 正确性
功能
禁止在渲染期间对组件或 Hook 外部声明的变量进行赋值或修改；副作用必须在渲染之外运行。
由 React Compiler 提供支持，该编译器每个文件只运行一次，并与其他 React Compiler 规则共享。移植自 react-hooks/globals。
为什么这是不好的做法？
组件必须是纯函数，这样 React 才能随时以任意顺序渲染它们。在渲染期间写入全局变量会使输出取决于组件的渲染次数，并且在 Strict Mode 和并发渲染下会失效。
示例
此规则下的错误代码示例：
jsx
let someGlobal = false;
function Component() {
someGlobal = true; // assignment during render
return <div>{String(someGlobal)}</div>;
}此规则下的正确代码示例：
jsx
import { useEffect } from "react";
let someGlobal = false;
function Component() {
useEffect(() => {
someGlobal = true;
}, []);
return <div />;
}如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/globals": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/globals": "error",
},
});bash
oxlint --deny react/globals --react-plugin版本
此规则在 vnext 中添加。