在 React 编写的应用程序中，this 常常出现的问题，原因是自执行函数绑定 this 问题，尤其是函数作为事件处理程序时，需要重复适用 bind 进行强制绑定。而 react-autobind 是一个可以自动绑定 React 类组件方法的 npm 包，能够大大减少我们的工作量，提高代码的可读性和可维护性。
安装
使用 npm 进行安装：
npm install react-autobind # 或者 yarn add react-autobind
使用
使用 react-autobind 的步骤非常简单：
- 在组件的
constructor中引入autobind，并绑定组件的 this。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- -----------------
----- ----------- ------- --------- -
------------------ -
-------------
-- --------
---------------
-
-------- -
------ ------- -------------------------------- ------------
-
------------- -
-----------------------
-
-
------ ------- ------------注意：绑定的 this 是必须的，如果忘记执行此步骤，会导致代码错误。
- 调用组件的方法时，无需再次绑定 this。
-- -------------------- ---- -------
----- ----------- ------- --------- -
------------------ -
-------------
---------------
-
-------- -
------ ------- -------------------------------- ------------
-
------------- -
------------------------------
-- ----------------
-
-示例
下面是一个完整的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- -----------------
----- ----------- ------- --------- -
------------------ -
-------------
---------------
-
-------- -
------ -
-----
---------------------------
------- -------------------------------- -----------
------
--
-
------------- -
------------------------------
-- ----------------
-
-
------ ------- ------------深入理解
react-autobind 的原理是利用了 ES6 的 Decorator。每一个方法都是通过闭包，创建一个设置 this 的绑定，保存在组件实例的同名属性中。因此，绑定是在组件构造函数执行时自动完成的。每个方法都只有在被执行时才有可能被调用，保证了实例变量的绑定在所有方法都处于存在状态。
结尾
使用 react-autobind 可以减少绑定 this 的代码，提高开发效率，更加专注于编写业务逻辑。当然，过度依赖一些工具可能会产生其它的问题，比如降低代码的可读性，增加维护难度等，所以还是需要谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67965