在多个组件点击处理程序上的反应性能[单击处理程序与每个组件的点击处理程序]

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的不是原始对象，而是重构对象。这可能适合您的用例，但它同样可能是错误的来源。