跳至内容

react_perf/jsx-no-new-object-as-prop Perf

它做了什么

阻止本地于当前方法的对象被用作 JSX 属性的值。

为什么这样做很糟糕?

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

示例

此规则的不正确代码示例

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'}} />

此规则的正确代码示例

jsx
<Item config={staticConfig} />

参考

在 MIT 许可下发布。