反应中箭头函数的优化

Question

除了每次调用render时都需要创建新函数外，还有其他不同之处：

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

vs

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

例如，浏览器是否有任何优化？是否有任何实施差异？

如果没有差异，那么像bable这样的东西转换代码以避免在render函数中创建函数会有意义吗？

Answer 1

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

• 可以比平时更频繁地调用垃圾收集器
• 将导致您的组件（甚至纯组件）不必要的重新渲染，因为新功能将被视为新的支柱。

已经有一个babel插件解决了使用箭头fn引起的重新渲染问题： reflective-bind 使用此插件的性能优势已在here

中进行了描述