避免在渲染方法中綁定或內聯箭頭函數
簡介
>
簡介綁定定函數或使用React 中不鼓勵在render 方法中使用內聯箭頭函數，因為它會在渲染過程中產生效能問題。本文探討了這種做法的替代方案，並提供了它們的實作範例。
渲染中綁定的問題在渲染中綁定函數或使用內聯箭頭函數時，一個新的該函數的實例是在每個渲染週期中創建的。這可能會導致效能下降，尤其是在頻繁重新渲染的情況下。
場景：傳遞額外參數
todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)考慮將額外參數傳遞給映射函數內的事件處理程序的情況。例如，考慮從待辦事項清單中刪除一項：
解決方案：子元件要避免綁定，請為映射內容建立一個子組件：
deleteTodo = (val) => {
console.log(val)
}
todos.map(el =>
<MyComponent val={el} onClick={this.deleteTodo}/>
)子組件：
class MyComponent extends React.Component {
deleteTodo = () => {
this.props.onClick(this.props.val);
}
render() {
return <div onClick={this.deleteTodo}> {this.props.val} </div>
}
}子組件：
子組件（MyComponent）：
class Parent extends React.Component {
_deleteTodo = (val) => {
console.log(val)
}
render() {
var todos = ['a', 'b', 'c'];
return (
<div>{todos.map(el =>
<MyComponent key={el} val={el} onClick={this._deleteTodo}/>
)}</div>
)
}
}
class MyComponent extends React.Component {
_deleteTodo = () => {
console.log('here'); this.props.onClick(this.props.val);
}
render() {
return <div onClick={this._deleteTodo}> {this.props.val} </div>
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));以上是為什麼要避免在 React 的 Render 方法中使用綁定或內聯箭頭函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
