跳到內容

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

此規則的作用

防止將當前方法中定義的函式用作 JSX 屬性的值。

為何這樣不好?

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

範例

此規則的錯誤程式碼範例

jsx
<Item callback={new Function(...)} />
<Item callback={this.props.callback || function() {}} />

此規則的正確程式碼範例

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

參考資料

在 MIT 許可證下發布。