React の Render メソッドでバインディングまたはインライン矢印関数を避けるべきなのはなぜですか?

Render メソッドでのバインドまたはインライン矢印関数の回避

概要

バインド関数または使用render メソッド内のインライン アロー関数は、レンダリング中にパフォーマンスの問題が発生する可能性があるため、React では推奨されません。この記事では、この方法の代替案を検討し、その実装例を示します。

レンダリングでのバインディングの問題

レンダリングで関数をバインドするとき、またはインライン アロー関数を使用するとき、新しい関数のインスタンスはレンダリング サイクルごとに作成されます。これは、特に頻繁に再レンダリングを行う場合に、パフォーマンスの低下につながる可能性があります。

バインディングの代替手段

• コンポーネント コンストラクターの使用:

  • レンダリング中に同じインスタンスを再利用するには、コンストラクターで関数をバインドします。

• プロパティ初期化子構文の使用:

  • クラス本体で関数を宣言し、アロー関数を直接使用してプロパティに割り当てます。

シナリオ: 渡す追加のパラメーター

マップ関数内のイベント ハンドラーに追加のパラメーターを渡す場合を考えてみましょう。たとえば、ToDo リストから項目を削除することを検討してください。

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

)

子コンポーネント (MyComponent):

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

このアプローチでは、イベント ハンドラー関数は子コンポーネントに常駐し、レンダリング中のパフォーマンスが向上します。

例:

子コンポーネントのアプローチを示す完全な例を次に示します:

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 中国語 Web サイトの他の関連記事を参照してください。