React的事件绑定

1、绑定事件

采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。

2、事件handler的写法

• 直接在render里写行内的箭头函数(不推荐)

<button onClick={(event)=>{
    return this.handleClick(event,'abc')
}}>添加</button>

• 在组件内使用箭头函数定义一个方法(推荐)

  handleClick =()=>{
    console.log(this.state.name)
  }
//===========================================================
  render() {
	return (
		<div>
			<button onClick={() => this.handleClick()}>click</button>
		</div>
	)
  }

• 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用onClick={this.handleClick.bind(this)}(不推荐)

 <button onClick={this.handleClick.bind(this, 'hello')}>添加</button>

• 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

  constructor() {
    super()
    this.state = {
      name: 'lys'
    }
    // 推荐  只做一次bind操作
    this.myhandleClick = this.handleClick.bind(this);   //减少bind执行次数 内存处理方式比较好 但是这种方式拿不到event
  }

//事件柯里化
handleClick = (arg) =>{
	return ()=>{
		console.log(arg)
	} 
}

render() {
	return(
		<div>
			<button onClick={this.handleClick("abc")}>按钮</button>
		</div>
	)
}

3、Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法

4、事件的参数传递

• 在render里调用方法的地方外面包一层箭头函数
• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

补充:

合成事件：循环所有类型的eventPlugin，对应每个事件类型，生成不同的事件池，如果是空，则生成新的，有则用之前的，根据唯一key获取到指定的回调函数，再返回带有参数的回调函数。

总流程：组件装载/更新 – 新增/删除事件 – eventplugin添加到ListennerBank中监听事件 – 触发事件 – 生成合成事件 – 通过唯一key获取到指定函数 – 执行指定回调函数 – 执行完毕后释放