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