React中的合成事件

合成事件与原生事件  区别：

1. 命名不一样，原生用纯小写方式，react用小驼峰的方式

        原生：onclick      React的：onClick

2. 事件处理函数的写法不一样

        原生的是传入一个字符串，react写法传入一个回调函数

3. 阻止默认行为方式不同

        原生：return false,    react中的：event.preventDefault()

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 为了在回调中使用this, 这个绑定是必不可少的this.handleClick = this.handleClick.bind(this)handleClick(){this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick，this的值为undefined<Button onClick={this.handleClick}> // 2. 传入一个回调函数{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}

【 拓展：为什么需要绑定this 】

button按钮编译的过程：React.createElement()

// 伪代码
// 证明为什么绑定this
function creteElement (dom, params) {var domObj = document.createElement(dom)domObj.onClick = params.onClick // 后面的onClick(当前的onClick函数)赋值给前面的onClick, 这时，onClick执行的作用域是外层作用域。所以return出去的值找不到this.handleClick。[所以需要绑定this指定到当前的作用域]domObj.innerHTML = params.contentreturn domObj
}React.creteElement('button', {onClick: this.handleClick  
}, this.state.isToggleOn ? 'ON' : 'OFF')

如果不想绑定this的写法：

class Toggle extends React.Component {constructor(props)super(props)this.state={ isToggleOn: true }// 法1：bind绑定：为了在回调中使用this, 这个绑定是必不可少的// this.handleClick = this.handleClick.bind(this)handleClick = () => { // 法2：写成箭头函数，箭头函数没有作用域的this.setState((prevState) => ({isToggleOn: !prevState.isToggleOn}))}    render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick，this的值为undefined<Button onClick={() => this.handleClick()}> // 2. 传入一个回调函数   法3{this.state.isToggleOn ? 'ON' : 'OFF'}</Button> // 1. onClick小驼峰写法)}}

. 为何React要用合成事件机制

1. 进行浏览器兼容、跨平台、事件代理（移动端和pc端的一些原生事件不一定完全兼容的）
2. 挂载到documnet，减少内存消耗，避免频繁绑定和解绑事件，也方便事件统一管理

3. 避免垃圾回收、react事件池