React Render メソッドでインライン矢印関数を避けるべき理由は何ですか?

レンダリング メソッドでのインライン矢印関数の回避

内では this._handleChange.bind(this) などのインライン矢印関数を避けることをお勧めしますReact コンポーネントの render メソッド。

理由:

再レンダリング中に、React は古いメソッドを再利用する代わりに新しいメソッドを作成します。これにより、不要な関数の作成やメモリ割り当てが発生し、パフォーマンスに悪影響を及ぼす可能性があります。

代替案:

レンダリング メソッド内でバインディング アロー関数をバイパスするには、いくつかの方法があります。

1.コンストラクターのバインド:

• コンストラクター内のメソッドをバインドします: this._handleChange = this._handleChange.bind(this);

• 例:

  class MyClass extends React.Component {
     constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
     }
  
     _handleChange() {
        // ...
     }
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

2.プロパティ初期化子の構文:

• プロパティ初期化子の構文を使用してメソッドを定義します: _handleChange = () => { ... };

• 例:

  class MyClass extends React.Component {
     _handleChange = () => {
        // ...
     };
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

3.コールバック関数によるイベント処理:

• 必要な引数を受け取る別のコールバック関数を作成します:

• 例:

  class MyClass extends React.Component {
     handleDeleteTodo = (todo) => {
        // ...
     };
  
     render() {
        return todos.map((todo) => (
           <div key={todo}>
              <input onChange={this.handleDeleteTodo.bind(this, todo)}>
              {todo}
           </div>
        ));
     }
  }

4.コンポーネントスコープのアロー関数:

• レンダリング メソッドの外側、コンポーネント クラスのスコープ内でアロー関数を宣言します:

• 例:

  class MyClass extends React.Component {
      _handleDeleteTodo = (todo) => {
         // ...
      };
  
      render() {
         return todos.map((todo) => (
            <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}>
               {todo}
            </div>
         ));
      }
  }

5.外部イベント ハンドラー:

• レンダー メソッド内でのバインドを避けるために、イベント処理ロジックを外部コンポーネントまたはヘルパー関数に移動します:

• 例:

  const handleDeleteTodo = (todo) => {
     // ...
  };
  
  class MyClass extends React.Component {
     render() {
        return todos.map((todo) => (
           <MyComponent todo={todo} onDelete={handleDeleteTodo} />
        ));
     }
  }
  
  class MyComponent extends React.Component {
     render() {
        return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>;
     }
  }

これらの代替手段は、パフォーマンスを犠牲にしたり、不要な関数バインディングを導入したりすることなく、React コンポーネント内のイベントを処理する効率的な方法を提供します。

以上がReact Render メソッドでインライン矢印関数を避けるべき理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。