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

參考

• 規則來源