在 React 开发中，我们常常需要在事件处理函数中使用 this 关键字来访问组件实例的属性和方法。在 ES5 中，我们需要通过 .bind(this) 或者箭头函数来确保 this 指向正确。 然而，在 ES6 中引入的类组件和箭头函数，使得我们可以更加优雅地处理这个问题。
传统方式
首先，让我们来看一下传统的方式是如何使用 .bind() 来确保 this 的指向正确：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-在上面的代码中，我们必须在构造函数中手动绑定 handleClick() 方法的 this 上下文。这样做虽然能够解决问题，但是会让代码变得冗长而且难以维护。
使用箭头函数
在 ES6 中，我们可以使用箭头函数来自动绑定 this 上下文。箭头函数的 this 始终指向声明它时所在的上下文（也就是组件实例）。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - - ------ - --
----------- - -- -- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-如上所示，我们使用箭头函数来定义事件处理函数，这样 this 就会自动绑定到组件实例上。这种方式代码更加简洁，同时也更符合现代 JavaScript 的编码习惯。
注意事项
在使用箭头函数时，需要注意以下几点：
- 箭头函数只适用于类方法，不适用于生命周期方法；
- 如果需要访问事件对象（例如
event.target），则需要显式地将事件对象传递给函数，而不能像传统方式那样自动传递。
总结
在 React 中，使用箭头函数来定义事件处理函数可以让代码更加简洁和易于维护。但是需要注意它的一些限制条件，以便更好地使用它。
示范代码：https://codesandbox.io/s/arrow-function-in-react-5wzrp
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710