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解析/字符串化有其自己的成本。此外，它显然作为一般用例失败，因为传递给{"Message": "An error has occurred." "ExceptionMessage": "Cannot call action method 'System.Web.Http.Results.JsonResult`1[GelYikaFreamwork.Data.ResultStatus] Post[T](System.String, T)' on controller 'Gel_Yıka_Servis.Controllers.ServisController' because the action method is a generic method." "ExceptionType": "System.InvalidOperationException" "StackTrace": " konum: System.Web.Http.Controllers.ReflectedHttpActionDescriptor.InitializeActionExecutor(MethodInfo methodInfo) konum: System.Web.Http.Controllers.ReflectedHttpActionDescriptor.<InitializeProperties>b__4() konum: System.Lazy`1.CreateValue() konum: System.Lazy`1.LazyInitValue() konum: System.Lazy`1.get_Value() konum: System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken) --- Özel durumun oluşturulduğu önceki konumdan başlayan yığın izlemesinin sonu --- konum: System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter`1.GetResult() konum: System.Web.Http.Controllers.ApiControllerActionInvoker.<InvokeActionAsyncCore>d__0.MoveNext() --- Özel durumun oluşturulduğu önceki konumdan başlayan yığın izlemesinin sonu --- konum: System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter`1.GetResult() konum: System.Web.Http.Controllers.ActionFilterResult.<ExecuteAsync>d__2.MoveNext() --- Özel durumun oluşturulduğu önceki konumdan başlayan yığın izlemesinin sonu --- konum: System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) konum: System.Runtime.CompilerServices.TaskAwaiter`1.GetResult() konum: System.Web.Http.Dispatcher.HttpControllerDispatcher.<SendAsync>d__1.MoveNext()" }的不是原始对象而是重建对象。这可能适用于您的用例，但同样可能是错误的来源。

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

1 个答案: