一文讲清楚React合成事件机制和this的绑定问题

#一文讲清楚React合成事件机制和this的绑定问题

1. 什么是React合成事件

• 之前的文章讲过JavaScript事件,这个是基础，不懂的看这篇文章：一文大白话讲清楚javascript事件、事件模型、事件冒泡和捕获以及事件代理委托
• React基于浏览器的事件机制，实现了一套自身的事件机制，包括时间的注册，事件的合成，事件的冒泡和事件的派发等，这套事件机制被称为合成事件，SyntheticEvent
• 我们在React中给DOM节点绑定事件时，并没有直接绑定在该DOM节点上，而是绑定了在了根元素上，然后由统一的事件处理程序来处理，然后基于浏览器事件的冒泡机制，所有DOM节点的事件都会在根元素上触发。

import React from 'react'
class App extends React.Component{componentDidMount(){document.getElementById('btn1').addEventListener('click',(e)=>{console.log('btn1 native Event')})}handleBtn1Click=(e)=>{console.log('btn1 React Event')}handleBtn2Click=(e)=>{console.log('btn2 React Event')}render(){return(<div><button id="btn1" onClick='handleBtn1Click'>handleBtn1Click</button><button id="btn2" onClick='handleBtn2Click'>handleBtn2Click</button></div>)}
}
export default App

• 当我们点击第一个按钮时，会先打印btn1的原生事件，然后再打印React的合成事件，因为React的合成事件依赖于原生事件的冒泡。
• 所以原生实践阻止冒泡会阻止合成事件的执行
• 反过来不会

2. React事件的绑定

2.1 React事件的写法

• 在React应用中，事件名都是用小驼峰格式刷进行书写，比如onclick事件要写为onClick，然后事件的绑定通过一对花括号{}包裹事件名，上例子

import React from 'react'
class App extends React.Component{constructor(props){super(props)this.state={name:'tom'}}handleClick(){console.log(this.state.name)}render(){return(<button onClick={this.handleClick}>Click</button>)}
}
export default App

• 上述代码我们看着没什么问题，事件名采用小驼峰，也用{}包裹了，但是当我们点击打印的时候，会发现打印了undefined，这是为什么呢，说
• 这就要讲React事件的this丢失和绑定问题

2.2 React事件中this的丢失和重新绑定

• 首先，得明白JavaScript中this的指向问题，不明白的看把我这篇文章一文讲清楚this的指向性问题以及call、apply、bind关于this的指向绑定
• 上面之所以打印undefined，是因为在handleClick中找不到this，那就奇怪了，为什么找不到this了呢，我们直接上个例子

var obj={innerObj={print:function(){console.log(this)}}
}
obj.innerObj.print()//{ print: [Function: print] },
const fn=obj.innerObj.print;
fn()//globObject [global] 

• 在非严格模式下，fn()因为在node环境中运行的，所以直接打印global
• 现在我们设置为严格模式

use 'strict'
var obj={innerObj={print:function(){console.log(this)}}
}
obj.innerObj.print()//{ print: [Function: print] },
const fn=obj.innerObj.print;
fn()//undefined

• 在严格模式下，fn()因为没有调用者，所以undefined了，但是如果我们这么写fn.call(global)

use 'strict'
var obj={innerObj={print:function(){console.log(this)}}
}
obj.innerObj.print()//{ print: [Function: print] },
const fn=obj.innerObj.print;
fn.call(global)//global

• 把global重新指定给fn，就能正常打印global
• 而在React中，但我们设置了onClick={handleClick}时，React内部会把他解析为{onClick：this.handleClick},可以看到onClick充当了一个中间变量把this.handleClick传递给了另一个函数，那么就会造成this.handleClick中this指向windows或者global，而React的jsx最终经过babel编译时，实在严格模式下，所以this就丢了
• 那么怎么样才能找回呢，

2.2.1 事件绑定的时候重新bind

<button omnClick={this.handleClick.bind(this)}></button>

2.2.2 事件绑定的时候用箭头函数

<button omnClick={()=>this.handleClick}></button>

2.2.3 在构造函数里面通过bind绑定

constructor(props){this.handleClick.bind(this)
}
<button omnClick={this.handleClick}></button>

2.2.4 定义的时候用箭头函数定义

const handleClick=()=>{}
<button omnClick={this.handleClick}></button>

• 建议使用后两种方法，因为前两种会在每次render时生成新的方法实例，不利于性能优化