本文摘自PHP中文网，作者coldplay.xixi，侵删。
react需要绑定this的原因：在组件上绑定事件监听器，是为了响应用户的交互动作，特定的交互动作触发事件时，监听函数中往往都需要操作组件某个状态的值，进而对用户的点击行为提供响应反馈
本教程操作环境：windows7系统、React17版，DELL G3电脑。
推荐：react视频教程
react需要绑定this的原因：
1. 代码执行的细节
当在其他组件中调用或是使用ReactDOM.render()方法将其渲染到界面上时会生成一个组件的实例，因为组件是可以复用的，面向对象的编程方式非常适合它的定位。根据this指向的基本规则就可以知道，这里的this最终会指向组件的实例。
组件实例生成的时候，构造器constructor会被执行，此处着重分析一下下面这行代码：
1 |
|
此时的this指向新生成的实例，那么赋值语句右侧的表达式先查找this.handleClick( )这个方法，由对象的属性查找机制（沿原型链由近及远查找）可知此处会查找到原型方法this.handleClick( ),接着执行bind(this)，此处的this指向新生成的实例，所以赋值语句右侧的表达式计算完成后，会生成一个指定了this的新方法，接着执行赋值操作，将新生成的函数赋值给实例的handleClick属性，由对象的赋值机制可知，此处的handleClick会直接作为实例属性生成。总结一下，上面的语句做了一件这样的事情：
把原型方法handleClick()改变为实例方法handleClick(),并且强制指定这个方法中的this指向当前的实例。
2. ES5的写法中为什么不用bind(this)?
ES5的写法是指使用React.createClass( )方法来定义组件，React在V16以上的新版本中已经移除了这个API，你可以通过阅读更早版本的源代码看到这个方法的细节。
1 2 3 4 |
|
在老版本的React中，createClass()的定义中可以看到上面的代码，抛开其他复杂的逻辑，从方法名就可以看出这是一个自动绑定的方法，实际上在这个方法中所完成的，就是对组件中自定义方法的this强制绑定，感兴趣的读者可以自行翻看源码了解细节。
相关阅读 >>
更多相关阅读请进入《React》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
