javascript - React中箭头函数的优化

Question

除了每次调用 render 时需要创建一个新函数之外，与使用以下函数还有其他区别吗:

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

对比

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

例如，浏览器是否做了一些优化？执行上有什么差异吗？

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

Answer 1

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

• 可以比平常更频繁地调用垃圾收集器
• 将导致组件(甚至是纯组件)不必要的重新渲染，因为新函数将被视为新的 prop。

已经有一个 babel 插件可以解决这个由于使用箭头 fn 导致的重新渲染问题: reflective-bind已描述使用此插件的性能优势here