react/jsx-no-constructed-context-values Perf
它的作用
禁止 JSX 上下文提供者的值使用会导致不必要重新渲染的值。
为什么这不好？
每当 value 属性变化时，React Context 及其所有子节点和消费者都会重新渲染。由于每个 JavaScript 对象都具有自己的标识，像对象表达式（{foo: 'bar'}）或函数表达式这类内容在每次渲染时都会获得新的标识。这会让上下文认为它获得了一个新对象，并可能导致不必要的重新渲染和意料之外的后果。
这可能会带来很大的性能损耗，因为它不仅会导致上下文提供者和消费者以及其子树中的所有元素重新渲染，React 在渲染提供者并查找消费者时所做的树扫描处理也会被浪费。
示例
以下是此规则的错误代码示例：
jsx
return <SomeContext.Provider value={{ foo: "bar" }}>...</SomeContext.Provider>;jsx
function Component() {
function foo() {}
return <MyContext.Provider value={foo} />;
}以下是此规则的正确代码示例：
jsx
const foo = useMemo(() => ({ foo: "bar" }), []);
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;jsx
const MyContext = createContext();
const Component = () => <MyContext.Provider value="Some string" />;如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/jsx-no-constructed-context-values": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/jsx-no-constructed-context-values": "error",
},
});bash
oxlint --deny react/jsx-no-constructed-context-values --react-plugin版本
此规则在 v1.48.0 中添加。