為什麼要避免在 React 的 Render 方法中使用綁定或內聯箭頭函數？

避免在渲染方法中綁定或內聯箭頭函數

簡介

>

簡介

綁定定函數或使用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中文網其他相關文章！