在多個組件點擊處理程序上的反應性能[單擊處理程序與每個組件的點擊處理程序]

Question

我有一個呈現子元素列表的組件，是否爲所有項目分配一個單擊處理程序並從數據集屬性獲取信息，而不是爲每個孩子創建一個函數並將數據作爲參數傳遞？ 什麼更好或更習慣？

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

如果你想知道哪一個性能更好，找出最好的辦法是通過運行性能測試自己。

但是，就編碼造型而言，我強烈希望第二種選擇。

請記住，React的核心概念是單向數據流。你寫入DOM。你很少讀它。 （用戶輸入是規則的例外。）您應該避免寫入和讀取DOM可以保存在內存中的內容。在我看來，以這種方式使用數據屬性是一種反模式。

事實上，你必須用JSON序列化對象只會讓事情變得更糟。 JSON解析/字符串化有其自身的代價。此外，它顯然不能作爲一般用例，因爲你傳遞給deleteUser的不是原始對象，而是重構對象。這可能適合您的用例，但它同樣可能是錯誤的來源。