官网文章中写道:
你必须谨慎对待 JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined。
这并不是 React 特有的行为;这其实与 JavaScript 函数工作原理有关。通常情况下,如果你没有在方法后面添加 (),例如 onClick={this.handleClick},你应该为这个方法绑定 this。
绑定this的方法有三种
一,在构造函数中绑定
二, public class fields 语法
三,箭头函数
注意以上三种方法都是没有传参数的,至于传参数的方式接下来会讲到。
对于这三种方法通过仔细的观察你应该能看到,onclick
后面的值是函数,只是写法上有所差别,一种是this.handleClick
,而该值其实是个函数,另一种是箭头函数。
传参的方式有两种
一,回调函数
在回调函数中调用方法,此时的事件对象e
需要手动传入,因为默认值e
已经在回调中使用了
二,直接使用绑定的函数
这里需要注意,使用绑定的方式,事件参数e
会默认传递,如果需要只需在绑定的函数里使用参数e
即可,这里的e
会绑定到最后一个参数上。如果你仔细观察会发现,在传参的事件中,onclick
属性绑定的依然是函数。
三,prop传递函数的反向数据流
以官网的状态提示为例,该父组件绑定用的是上说的构造函数中绑定
通过上图你应该能看到这里的方向数据流似乎跟上面两种有所不同,其他本质上是一致的。举例来讲onTemperatureChange={this.handleCelsiusChange} />
这里的this.handleCelsiusChange
其实是上面那个函数,注意这里没有()
,所以这里是函数赋值而不是函数调用,而子通过this.props.onTemperatureChange(e.target.value);
来调用父组件传过来的函数,如果写成this.props.onTemperatureChange
就是指父组件的那个函数,这里因为要执行所以带有()
,这里的函数调用实质上执行的是父组件的handleCelsiusChange(e.target.value)
,因为这里的函数除了使用的时候是函数调用,其余时候是函数传递。
注:举例说明以上传递
看了以上内容,会不会觉得跟传统的html绑定没什么区别呢?
官网中介绍到二者的区别:
其实二者的区别在于react
是绑定函数的形式,传统的html
是函数调用的形式。可能你会想到开头提到的问题,不绑定this
,当你调用这个函数的时候 this 的值为 undefined。原因在于react
绑定的是函数,当onclick
触发执行函数的时候,此时的函数其实是直接调用,因为函数前面没有点的存在,如test.handclick()
类形式,所以this
是window 或者 undefined
。
知识点补充:在严格版中的默认的this不再是window,而是undefined。