地图中的箭头功能在渲染中.反应 [英] Arrow functions inside map in render. React

问题描述

我想知道在将箭头函数传递给render内部的map函数与传递对该箭头函数的引用之间是否存在性能差异，如下所示:

I'd like to know if there is any performance difference between passing an arrow function to a map function inside render, and passing a reference to that arrow function, like so:

render {
   const { users } = this.props;

   //Arrow function passed to map,  in render. 
   const userList= 
    users.map((user) =>
     <User
      name={ user.name }
     />);

    return(
     <div>
      {userList}
     </div>
    );
 }

vs

makeUser = (user) => <User name={ this.props.user.name } />

render {
   const { users } = this.props;

   //Passing the arrow function reference
   const userList = users.map(this.makeUser);

    return(
     <div>
      {userList}
     </div>
    );
 }

不是第一个在内存中创建并分配空间的对象吗，对于箭头函数，每次调用render都是如此?

Isn't the first one creating and allocating space in memory, for the arrow function, each time render is called?

谢谢

推荐答案

将函数与render方法解耦会更加实用，并且会带来更好的功能.尽管您在考虑初始方法所消耗的资源方面是完全正确的，但它有不同的方面. 初始方法在运行时创建，存储并映射为运行时编译器中的N引用，进行了优化.敢于假设V8.发生这种情况的原因是命名函数表达式而不是匿名函数表达式. 我建议您保持代码正常运行，如果可能的话，避免在render内部创建任何函数，将抽象保持在最自然的位置.

Decoupling the function from the render method is pragmatically better and makes for a better functional approach. Although you are entirely correct in your way of thinking about the consumed resources of the initial approach there are different sides to this. The initial approach gets created at runtime, stored and mapped as a N of reference in the runtime compiler, optimized. Dare i assume V8. This happens because of the named function expression as opposed to an anonymous. I would advise you to keep the code functional, avoiding any creation of functions inside of render if possible, keep the abstraction at its most natural place.

这篇关于地图中的箭头功能在渲染中.反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！