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

React performance on multiple component click handlers [single click handler vs click handler for each component]

本文关键字：处理 程序 组件 性能      更新时间：2023-11-26

我有一个呈现子元素列表的组件，为所有项目分配一个单击处理程序并从数据集属性中获取信息与为每个子元素创建一个函数并将数据作为参数传递之间是否存在性能差异？什么更好或更地道？

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>
    );
  }
}

与

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>
    );
  }
}

如果您想知道哪一个性能更好，最好的方法是自己运行性能测试。

然而，就编码样式而言，我非常喜欢第二种选择。

请记住，React的核心概念是单向数据流。您向DOM写入。你很少从中读取。（用户输入是规则的例外。）你应该避免向DOM写入和从中读取你可以保存在内存中的内容。在我看来，以这种方式使用数据属性是一种反模式。

事实上，您必须使用JSON序列化对象，这只会使情况变得更糟。JSON解析/字符串化有其自身的成本。此外，作为一般用例，它显然失败了，因为传递给deleteUser的不是原始对象，而是重建的对象。这对您的用例来说可能很好，但同样也可能是错误的来源。

相关文章：