- A+
不要问自己需要什么样的人生，而要问自己想要成为什么样的人。
我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的，还应该样式和 Javascript 逻辑的。这里我们认识逻辑构造之事件处理。
1. React 事件处理
这里列举了在 React 中事件的几种绑定处理方式：
import React, { Component } from "react"; class App extends Component { render () { return ( <div> <input/> <button onClick={ ()=>{ console.log("第一种事件绑定处理方式") }}>Add-1</button> <button onClick={ this.handleClick2 }>Add-2</button> <button onClick={ this.handleClick3 }>Add-3</button> <button onClick={ ()=>{ this.handleClick4() } }>Add-4</button> </div> ) } handleClick2() { console.log("第二种事件绑定处理方式") } handleClick3 = ()=>{ console.log("第三种事件绑定处理方式") } handleClick4 = ()=>{ console.log("第四种事件绑定处理方式") } } export default App; 2. 事件绑定区别
这里重点说明下在事件和事件绑定绑定中 this 指向问题。
2.1 匿名函数
直接执行匿名函数，直接在 {} 中写事件函数表达式。
写法特点：
- 适合逻辑少、简单表达式。如果处理逻辑过多、复杂 ，会导致结构不清晰，难维护，不推荐。
- 事件内部 this 指向和外部一致，因为箭头函数没有 this 指向问题原则。
能直接访问：
- 因为 onClick 后面表达式跟的是一个函数（箭头函数），这里事件内部 this 指向和外部一致。
class App extends Component { // 定义属性 value = 100 render () { return ( <div> <input/> <button onClick={ ()=>{ console.log("第一种事件绑定处理方式", this.value) }}>Add-1</button> </div> ) } 2.2 调用内部普通函数
写法特点：this 指向和外部不一致，需要用 bind 修正 this 指向，不推荐使用。
<button onClick={ this.handleClick2 }>Add-2</button> // 修正后： <button onClick={ this.handleClick2.bind(this) }>Add-2</button> handleClick2() { // 异常，需要通过改变 this 指向解决 console.log("第二种事件绑定处理方式", this.value) } 不能直接访问：
这里访问类属性 this.value 会报错，我们可以打印出 this 看下它指向什么，结果会是：undefined。为什么 this 会丢失呢？记住一句话：函数中的 this 谁调用我，this 就指向谁。这里点完按钮后被 React 事件系统调用的，this 指向的应该是 React 事件系统。用于不会指向 App 这个实例。而这里它也没有指向 React 事件系统，而是丢了指向 undefined。哈哈哈....
2.3 调用内部箭头函数
写法特点：this 指向和外部一直，没有 this 指向问题，推荐使用。
<button onClick={ this.handleClick3 }>Add-3</button> handleClick3 = ()=>{ console.log("第三种事件绑定处理方式", this.value) } 这里是箭头函数，this 指向根本不关心谁调用的我，它永远保持与外部作用域一样的，它指向的 app 的实例。为什么箭头函数 this 指向就不关心谁调用的我呢？我也不知道.... 难到....
- 箭头函数会自动改变 this 的指向？？？
- 或者箭头函数不是改变 this 指向，而是引用上一个作用域的 this ？？？
- 一个比较权威的解释是在箭头函数中，this 与封闭词法上下文的 this 保持一致。在全局代码中，它将被设置为全局对象。
2.4 执行匿名函数，调用其他内部函数
写法特点：this 指向和外部一直，没有 this 指向问题，符合谁调用我我指向谁。非常推荐使用这种写法，参数传递很方便。
<button onClick={ ()=>{ this.handleClick4() } }>Add-4</button> // 语法简写： <button onClick={ ()=>this.handleClick4() }>Add-4</button> // 有人说这里是因为你写成了箭头函数了吧，即使他不写成箭头函数也没关系，刚才讲的原理，符合谁调用我我指向谁。 handleClick4 = ()=>{ console.log("第四种事件绑定处理方式", this.value) } 整体有个问题： 要不要加小括号，不加不让他自己主动执行，点击系统会调用、加小括号执行函数。加小阔号主动执行，点击后不执行 undefined。
2.5 JS 中修正 this 指向方案
- call：改变 this 指向，自动执行函数；
- apply：改变 this 指向，自动执行函数；
- bind：改变 this 指向，不会自动执行函数，需要手动加括号执行函数 ；
var obj1 = { name: "obj1", getName() { console.log(this.name) } } var obj2 = { name: "obj2", getName() { console.log(this.name) } } // this.name 谁调用我我指向谁 obj1.getName() // 结果 obj1 obj2.getName() // 结果 obj2 // call, reply ：修改 obj1 getName 中 this 指向 obj2 obj1.getName.call(obj2) // 结果 obj2 obj2.getName() // 结果 obj2 3. 总结事件处理
3.1 this 指向问题，记住两句话
- 谁调用我我指向谁原则；
- 箭头函数没有 this 指向问题；
3.2 React 事件绑定和原生事件绑定有什么区别？
React 中事件绑定没有绑定到具体的 DOM 节点（元素）身上。它采用的是一种事件代理的模式，绑定在根节点身上。绑定到每一个 DOM 节点身上是很消耗内存的。
React 模拟了一套事件冒泡机制，等冒泡到根节点上通过 target 事件源找到是那个元素真实触发的，然后从这个触发的元素到顶点所有节点都去查一查，有没有一个叫 onClick 属性，如果有就把这个 onClick 事件给执行了，完整模拟冒泡的流程，即模拟系统事件机制。其不需要考虑解绑、移除事件等，只有节点从页面中没了，onClick 根本就不会再有了，没有绑定只有节点没了 onClick 就没了。
3.3 Event 事件对象也是支持的
Event 对象，和普通浏览器一样，事件 handler 会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React 中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有 event . stoppropagation、event.preventDefault 这种常用的方法。
