react 哲学 – react (docschina.org)_React事件处理

《快速上手React编程》CH6 React事件处理

这章主要讲了如何在React中处理DOM事件，如何绑定事件（通过属性传递函数的定义），如何在同一个父组件 不同的子组件之间进行通信，React中的事件内部的原理与注意点，如何在React中进行其它事件的监听，如何在React中混用其它UI组件，如jquery组件。

React实现的事件是兼容不同浏览器的，相当于把浏览器的原生事件包了一层，提供了统一的方法，它支持的事件列表详见官方文档 SyntheticEvent – React 。

在使用上，跟属性的写法一致 onClick={this.handleSth.bind(this)} 就可以了。需要注意的是，因为onClick里面是函数，所以有个this的问题，如果不用访问React的对象，不用写bind(this)，如果要访问，可以写箭头函数，不写箭头就要bind(this)一下，顺便一提，旧版的React.createClass会自动绑this，不用手动写。这里有一个优化点，可以在constructor里写this.handleSth = this.handleSth.bind(this)，这样render函数里就不用每次运行到都绑定，可以减少重复绑定。

js里的事件是有一个捕获（从父级元素到子级元素）和冒泡（从子级元素到父级元素）的过程的，在父子元素监听了同样的事件时，这个问题比较关键。React的事件默认是冒泡，也可以用捕获，只需要在标准事件名后面加个“Capture”就行了，比如onMouseOverCapture。

React内部实现上，并不是对每个DOM分别绑定事件的，它的事件统一绑定在document上，这个可以在控制台里运行getEventListeners(document)来查看事件绑定，getEventListeners($0)可以查看当前Elements 页面选中元素的事件绑定的事件。React里各个DOM元素的事件都统一绑定在document上，document上触发了一个事件，React从事件的数据里找到是谁触发的，然后在监听的映射表里找到应该触发谁的绑定事件，这样性能很好，可以让React更快，与之相反的是jQuery，jQuery把事件绑定到各个元素上。

React的事件学名叫 SyntheticEvent（官方文档 SyntheticEvent – React ），就是合成的事件，它处理了浏览器的兼容问题，提供统一的api。有一个特性是，事件对象（function(event){console.log(event)} 中的这个event事件对象）在对应的处理程序执行完毕后，就会被取消，React这么实现显然是为了性能好，但是如果一定要在事件处理程序结束后还使用它（比如需要异步操作），可以调用event.persist()方法，用了这个方法，event事件对象就不会被取消。可以看出React对性能的挑剔，除非你声明，不然就回收掉了。

同一个父组件的两个子组件如果需要通信，要怎么做呢？

A组件想把一个数据a传递给B组件：可以在父组件里的state中定义a，然后通过props传递给B，然后在父组件中定义一个方法 this.changeStateA.bind(this)，这个方法更改父组件state里的a，然后把这个方法作为props传递给A组件，A组件在自己的jsx里面写 onClick={this.props.changeStateA}，这样写，A组件触发点击事件后，就会调用到父组件的方法，然后B组件的props就会更改，从而触发重新渲染。

React集成其它UI库，或者说监听事件，就是在componetDidMount那里手动写事件监听，不管是监听的window下的什么事件、UI的什么事件还是自定义的什么事件，用完了在componentWillUnmount里把监听去掉，防止内存泄漏。

——————————————————————————————

今天真的好困啊。。。快三点了

晚安 么么哒~ღ( ´･ᴗ･` )比心