合成事件與原生事件? 區別：

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事件池