在 React 中抛弃 .bind(this)

在 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

[翻]在 React 中抛弃 .bind(this)

在 React 中抛弃 .bind(this)

传统方式

使用箭头函数

注意事项

总结