← Back to rules

react/jsx-no-constructed-context-values 性能

它做了什么

禁止在 JSX Context Provider 中使用会导致无意义重新渲染的值。

为什么这是不好的？

每当 React Context 及其所有子节点和 Consumers 的 value 属性发生变化时，就会触发重新渲染。由于每个 JavaScript 对象都有其自身的身份标识，因此像对象表达式（{foo: 'bar'}）或函数表达式这样的结构在每次渲染时都会获得新的身份。这会使 Context 认为它收到了一个新对象，从而导致不必要的重新渲染和意外后果。

这种行为可能带来巨大的性能开销，因为不仅会引发 Context Provider 及其子树中所有元素的重新渲染，还会浪费掉 React 在遍历整个组件树以渲染 Provider 并查找 Consumers 所需的处理时间。

示例

以下为 错误 的代码示例：

return <SomeContext.Provider value={{ foo: "bar" }}>...</SomeContext.Provider>;

function Component() {
  function foo() {}
  return <MyContext.Provider value={foo} />;
}

以下为 正确 的代码示例：

const foo = useMemo(() => ({ foo: "bar" }), []);
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;

const MyContext = createContext();
const Component = () => <MyContext.Provider value="Some string" />;

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-constructed-context-values": "error"
  }
}

CLI

oxlint --deny react/jsx-no-constructed-context-values --react-plugin

参考资料

• 规则源码