react_perf/jsx-no-jsx-as-prop 性能

作用

防止局部于当前方法的 JSX 元素作为 JSX 属性值使用。

为什么这么糟糕？

使用局部定义的 JSX 元素作为属性值会导致意外重新渲染和性能问题。每当父元素渲染时，JSX 元素的新实例都会被创建，引起子组件的不必要重新渲染。这也导致代码更难维护，因为组件的属性无法一致传送。

示例

对此规则，以下是错误代码示例

<Item jsx={<SubItem />} />
<Item jsx={this.props.jsx || <SubItem />} />
<Item jsx={this.props.jsx ? this.props.jsx : <SubItem />} />

对此规则，以下是正确代码示例

<Item callback={this.props.jsx} />

引用

• 规则来源