[译]避免在React render方法中使用箭头函数和函数绑定

原文: Why Arrow Functions and bind in React’s Render are Problematic
作者: Cory House

在之前的文章中,我有讲到如何提取子组件并避免在render中使用绑定或箭头函数。但是我并没举例有说明为什么这么做。

这里是一个简单的栗子。

在这个例子中,我在render方法中使用箭头函数给每个删除按钮绑定了用户ID。

在35行,我使用了一个箭头函数向deleteUser函数传递了参数。这是问题所在。

来看一看为什么这么说,切换到User.js(点击左上角的汉堡图标来选择不同的js文件)。每次渲染的时候我都使用了console.log。我使用了PureComponent,因此User应该只在props或者state改变的时候重新渲染。但是每当你删除一个user,注意所有的User实例的render方法都被调用了

原因是:父组件向下传递了一个箭头函数作为props。每次渲染的时候箭头函数都被重新分配(和使用bind的情况一样)。所以尽管我把User.js定义为PureComponent,它的父组件中的箭头函数导致User组件将其作为新的函数并通过props传递给所有的user。

总结:

避免在render中使用箭头函数和绑定。它影响了shouldComponentUpdate和PureComponent的性能优化。

那我应该怎么做?

这里有一个不使用箭头函数的例子。

在这个例子中,index.js的render方法中没有使用箭头函数。作为替代,相关的数据都传递给了User.js。在User.js中,onDeleteClick调用了props中传递的onClick函数,并传递了user.id参数。

这样修改后,当你再点击删除按钮,注意其他的User都没有再调用render方法!

总结

为了优化性能,

  1. 避免在render方法中使用箭头函数和绑定(bind)
  2. 应该怎么做?提取子组件 或者 通过HTML元素传递数据
Comments
Write a Comment
  • Sollrei reply

    同步数据时候丢了些东西,回之前在这里问模板问题的同学:我换到那个主题的时候好像没什么问题,图片上面就是导航了吧,你说的是哪里的图...

  • lee reply

    啊? 这个bitcron怎么才能获得邀请资格啊

    • Sollrei reply

      @lee 以下是引用自官方: “如果非常明确 Bitcron 对自己有特定用途的,也可以联系 pi@bitcron.com,我们也会酌情发放邀请。”

      • lee reply

        @Sollrei ths, 你真是个大好人,博客很好看, 可以多写点底层的东西啊, 架构方面的