← Back to rules

react-perf/jsx-no-new-object-as-prop 性能

它做了什么

防止将局部于当前方法的对象用作 JSX 属性的值。

为什么这是不好的？

将本地定义的对象用作属性值可能导致意外的重新渲染和性能问题。每次父组件渲染时，都会创建该对象的新实例，从而导致子组件不必要的重新渲染。这还会使代码更难以维护，因为组件的属性传递不再一致。

示例

此规则的错误代码示例：

<Item config={{}} />
<Item config={new Object()} />
<Item config={Object()} />
<Item config={this.props.config || {}} />
<Item config={this.props.config ? this.props.config : {}} />
<div style={{display: 'none'}} />

此规则的正确代码示例：

<Item config={staticConfig} />

如何使用

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

配置 (.oxlintrc.json)

{
  "plugins": ["react-perf"],
  "rules": {
    "react-perf/jsx-no-new-object-as-prop": "error"
  }
}

CLI

oxlint --deny react-perf/jsx-no-new-object-as-prop --react-perf-plugin

参考资料

• 规则源码