跳至內容

react_perf/jsx-no-new-array-as-prop 效能

功能

防止將目前方法本地的陣列用作 JSX 屬性的值。

為何這樣不好?

將本地定義的陣列作為屬性的值可能會導致意外的重新渲染和效能問題。每次父組件渲染時,都會建立一個新的陣列實例,導致子組件不必要的重新渲染。這也會導致程式碼更難維護,因為組件的屬性傳遞不一致。

範例

此規則的不正確程式碼範例

jsx
<Item list={[]} />
<Item list={new Array()} />
<Item list={Array()} />
<Item list={this.props.list || []} />
<Item list={this.props.list ? this.props.list : []} />

此規則的正確程式碼範例

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

參考資料

在 MIT 許可下發布。