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

參考資料

• 規則來源