代码之家  ›  专栏  ›  技术社区  ›  FabianCook

react中箭头函数的优化

  •  0
  • FabianCook  · 技术社区  · 7 年前

    除了每次需要创建一个新函数之外 render 调用时,是否与使用以下命令有任何其他区别:

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

    vs公司

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

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

    如果没有差异,像bable这样的东西转换代码以避免在 提供 作用

    1 回复  |  直到 7 年前
        1
  •  1
  •   Anu Zedorg    7 年前

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

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

    已经有一个babel插件解决了使用arrow fn导致的重新渲染问题: reflective-bind 已经描述了使用此插件的性能优势 here