Javascript react中arrow函数的优化

除了每次调用

render

时都需要创建一个新函数外，使用以下函数是否还有其他区别：

class {
   on = () => true
   render = () => <z on={this.on} />
}

类{
on=（）=>true
渲染=（）=>
}

vs

类{
render=（）=>true}/>
}

例如，浏览器是否进行了任何优化？是否存在任何实现差异

---

如果差异为零，像bable这样的东西转换代码以避免在

render

函数中创建函数是否有意义

从Reactjs的角度来看，由于arrow函数每次都会创建一个新函数，因此它可能会导致两个与性能相关的问题：

• 可能比平常更频繁地调用垃圾收集器
• 将导致不必要的组件重新渲染（即使是纯组件），因为新功能将被视为新道具

已经有一个babel插件解决了使用arrow fn导致的重新渲染问题：

---

使用此插件的性能优势已被描述

{}=>true

si无效。让函数始终返回true的目的是什么？一如既往：是的，如果js中的优化符合逻辑，那么第二个可能会更快。即使如此：你为什么在乎？您是否有性能问题？如果是这样，那肯定不是箭头func@klugjo感谢您的更正，目的不是函数中的内容，而是函数的定义方式。@JonasW。我为什么在乎：简单的好奇，

render=（）=>{}

不会起作用，是吗？就像半年前我试过的那样，它在babelI中产生了一个错误，我甚至没有想到这一点，如果发生这种情况，会不会导致很大的性能问题？这取决于很多因素，比如你作为道具传递的箭fn数量，这些箭头FN作为道具传递到多少级别的组件嵌套etc@FabianCook如果你还有任何问题，一定要告诉我。如果这个答案对你有帮助，请接受它，这样它将在将来帮助别人。

class {
   render = () => <z on={() => true} />
}