先罗列一下在react中如何定义和使用函数？

定义function类型

 fn() {
    console.log(this)
  }
1
2
3

使用function类型

  render() {
    return (
      <div>
          <Button onClick={this.fn}>请点击</Button>
      </div>)
    }
1
2
3
4
5
6

会引发什么样子的问题呢？

this指向的问题
接下来当页面加载完毕的时候我打印一次this和点击以后的this做一次对比

页面初始化完毕以后this的参数

fn函数内部的this(这里的this指向的就是函数自己)

如何解决function函数的this指向的问题呢？

call、aplay 和 bind这里就不一一列举了，最常用的就是bind

bind: 方法会创建一个新的函数，当被调用的时候，将其this关键字设置为提供的值，我们必须手动去调用

 <Button onClick={this.fn.bind(this)}>请点击Button>
1

看看效果吧 !
这里的代码没有改变

使用bind以后的结果:

箭头函数类型的定义和使用

定义

使用方式和function一样的区别在于箭头函数没有自己的this指向，只会向上继承父级的this指向，如果父级没有this指向还会继续向上检索


执行后的效果

如何进行事件传参呢？

1.使用bind，call，aplay

2.使用箭头函数的方式传参

重点来了，如何使用事件对象event？

不传参的情况下

不传参的情况下默认值就是event

如果我需要传参还需要获取事件对象event呢？

1.使用bind，call，aplay

<Button onClick={this.fn.bind(this, '我是传递进去的参数')}>请点击Button>
1

结果

这是为什么呢？
当你使用bind，call，aplay着三个函数的时候，默认他最后一位的参数就是event事件对象
如果我传递三个参数呢？

第二个参数是没有值的

就会发现最后一个怎么没有值呢？
通过推算的出来的结果是赋值的event的公式应该是
传递进去参数的长度 + 1 = 就是event事件对象最后所在的位置

2.使用箭头函数(使用较多)

 <Button onClick={(e) => this.fn(e,'我是传递进去的参数')}>请点击</Button>
1

这里的运行机制就相当于，我先拿到事件对象赋值给原先的函数，因为函数如果不传参的情况下，默认值，就是事件对象。
()=>这种写法相当于直接返回结果

函数使用和传参的注意事项

这种写法是万万不可的!!!

像这种方法就相当于这个button按钮好了以后就加载这个函数
render树刷新一次，这个事件都会执行一次，会增加计算机的负担。

    <Button onClick={this.fn('e', '我是传递进去的参数')}>请点击</Button>
1

万万不能这样写!!!