react 绑定 箭头函数_为什么箭头函数和React渲染中的绑定有问题

react 绑定 箭头函数

(提示：这会使shouldComponentUpdate和PureComponent变得胡思乱想) ((Hint: It makes shouldComponentUpdate and PureComponent cranky))

In a previous post, I explained how to extract React child components to avoid using bind or arrow functions in render. But I didn’t provide a clear demo to show why this is useful.

在上一篇文章中，我解释了如何提取React子组件以避免在render中使用bind或arrow函数 。 但是我没有提供清晰的演示来说明为什么这样做很有用。

Here’s a quick example.

这是一个简单的例子。

In this example, I’m using an arrow function in render to bind the relevant user ID to each delete button.

在此示例中，我在渲染中使用箭头功能将相关的用户ID绑定到每个删除按钮。

On line 35, I’m using an arrow function to pass a value to the deleteUser function. That’s a problem.

在第35行，我使用箭头函数将值传递给deleteUser函数。 那是个问题。

To see why, check out User.js (click the hamburger icon on the top left to select different files in the example). I’m logging to the console each time render is called. I’ve declared User as a PureComponent. So User should only re-render when props or state change. But when you click on delete for a user, note that render is called for all User instances.

要了解原因，请查看User.js(在示例中单击左上角的汉堡包图标以选择其他文件)。 每次调用渲染时，我都会登录到控制台。 我已经将User声明为PureComponent 。 因此，用户仅应在道具或状态更改时重新渲染。 但是， 当您单击某个用户的删除时，请注意，将为所有 User实例调用render 。

Here’s why: The parent component is passing down an arrow function on props. Arrow functions are reallocated on every render (same story with using bind). So although I’ve declared User.js as a PureComponent, the arrow function in User’s parent causes the User component to see a new function being sent in on props for all users. So every user re-renders when any delete button is clicked. ?

原因如下：父组件正在传递道具上的箭头功能。 箭头函数会在每个渲染器上重新分配(使用bind的情况与此相同)。 因此，尽管我已将User.js声明为PureComponent，但User父级中的arrow函数使User组件看到了一个新函数，该函数正在props中为所有用户发送。 因此，每个用户在单击任何删除按钮时都会重新渲染。 ？

Summary:

摘要：

Avoid arrow functions and binds in render. It breaks performance optimizations like shouldComponentUpdate and PureComponent.

避免使用箭头功能并绑定到渲染中。 它破坏了诸如shouldComponentUpdate和PureComponent之类的性能优化。

我应该怎么做呢？ (What Should I Do Instead?)

For contrast, here’s an example that doesn’t use an arrow function in render.

相比之下，这是一个在渲染中不使用箭头功能的示例。

In this example, index.js has no arrow function in render. Instead, the relevant data is passed down to User.js. In User.js, onDeleteClick calls the onClick function passed in on props with the relevant user.id.

在此示例中，index.js在渲染中没有箭头功能。 而是将相关数据传递给User.js。 在User.js中，onDeleteClick使用相关的user.id调用道具传递的onClick函数。

With this change, when you click on delete, notice that render isn’t called for the other Users! ?

进行此更改后，当您单击删除时，请注意其他用户未调用渲染！ ？

摘要 (Summary)

For optimal performance,

为了获得最佳性能，

1. Avoid arrow functions and bind in render.
   避免使用箭头功能并绑定到渲染中。

2. How? Extract child components, or pass data on the HTML element.

   怎么样？ 提取子组件 ，或在HTML元素上传递数据 。

寻找更多关于React的信息？ ⚛️ (Looking for More on React? ⚛️)

I’ve authored multiple React and JavaScript courses on Pluralsight (free trial). My latest, “Creating Reusable React Components” just published! ?

我已经在Pluralsight上编写了多个React和JavaScript课程 ( 免费试用 )。 我的最新作品“ 创建可重用的React组件 ”刚刚发布！ ？

Cory House is the author of multiple courses on JavaScript, React, clean code, .NET, and more on Pluralsight. He is principal consultant at reactjsconsulting.com, a Software Architect at VinSolutions, a Microsoft MVP, and trains software developers internationally on software practices like front-end development and clean coding. Cory tweets about JavaScript and front-end development on Twitter as @housecor.

Cory House是JavaScript，React，干净代码，.NET等课程的多本课程的作者，并且还提供了有关Pluralsight的更多课程 。 他是reactjsconsulting.com的首席顾问， VinSolutions的软件架构师，Microsoft MVP，并且在软件开发方面对国际软件开发人员进行了培训，例如前端开发和简洁编码。 Cory在Twitter上以@housecor表示关于JavaScript和前端开发的推文 。

翻译自: https://www.freecodecamp.org/news/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36/

react 绑定 箭头函数