React の Render メソッドでバインディングまたはインライン矢印関数を避けるべきなのはなぜですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-15 17:51:03

オリジナル

512 人が閲覧しました

Why Should You Avoid Binding or Inline Arrow Functions in React's Render Method?

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