複数コンポーネントのクリックハンドラーでのパフォーマンスの改善[シングルクリックハンドラーと各コンポーネントのクリックハンドラー]

Question

子要素のリストをレンダリングするコンポーネントがあります。すべての項目に対して1つのクリックハンドラーを割り当てるのはパフォーマンス上の違いがありますデータセットの属性から情報を取得する方法と、各子供のために関数を作成し、データを引数として渡す方法があります。 何が良いか、もっと慣れていますか？

import React, { Component } from 'react'; 

export class UserList extends Component { 
    deleteUser() { 
    const user = JSON.parse(e.curentTarget.dataset['user']); 
    // handle deletion 
    } 

    render() { 
    return (
     <ul> 
     {this.props.users.map((u) => (
      <li 
      key={u.id} 
      data-user={JSON.stringify(u)} 
      onClick={::this.deleteUser} > 
      delete {u.name} 
      </li> 
     ))} 
     </ul> 
    ); 
    } 
} 

VS

import React, { Component } from 'react'; 

export class UserList extends Component { 
    deleteUser(user) { 
    // handle deletion 
    } 

    render() { 
    return (
     <ul> 
     {this.props.users.map((u) => (
      <li 
      key={u.id} 
      data-user={JSON.stringify(u)} 
      onClick={() => this.deleteUser(u)} > 
      delete {u.name} 
      </li> 
     ))} 
     </ul> 
    ); 
    } 
} 

Answer 1

あなたがより良い実行する1知りたい場合は、見つけるための最善の方法は、パフォーマンステストを自分で実行することです。

ただし、コーディングスタイリングに関する限り、私は第2の選択肢を強く望んでいます。

Reactのコアコンセプトは一方向データフローであることに注意してください。あなたはDOMに書き込む。あなたはめったにそれから読むことはありません。 （ユーザー入力はルールの例外です。）DOMに書き込むことや、DOMから読み取ることは避けてください。私の意見では、このようにデータ属性を使用することは、アンチパターンです。

オブジェクトをJSONでシリアル化しなければならないという事実だけが悪化します。 JSONの解析/ストリング化には独自のコストがあります。さらに、通常のユースケースとしては明らかに失敗します。deleteUserに渡すものは元のオブジェクトではなく、再構築されたオブジェクトです。これはあなたのユースケースでは問題ないかもしれませんが、同様にバグの原因になる可能性があります。