React事件机制

JSX表示对象

Babel将JSX转译为一个名为React.createElement()函数调用

React读取这些React元素对象并使用它们构建DOM以保持随时更新

React事件机制

充当浏览器原生事件的跨浏览器包装器的对象

将不同浏览器行为组合到一个 API中，确保事件显示一致的属性

React 事件机制

< div onClick = {

this.handleClick.bind(this)

} > 点我 </ div >

React不是将click事件绑定到了真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到 document处的时候，React将事件内容封装并交由真正的处理函数运行。

这样可以减少内存消耗，还能在组件挂在销毁时统一订阅和移除事件

冒泡到document上的事件也不是原生浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。

如果不想要事件冒泡的话应调用event.preventDefault()方法，而不是调用event.stopProppagation()方法

合成事件的目的如下：

合成事件抹平了浏览器间的兼容问题，这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，就需要分配很多

的事件对象，造成高额内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，会从池子中复用对象，事件回调结束后，销毁事件对象上的属性，便于复用

React引入CSS的方式

内联样式，组件内直接使用：通过style属性直接引入组件中引入.CSS 文件，全局生效，样式之间互相影响

css in js：第三方库支持引入.module.css 文件

setState 同步还是异步

setState执行机制

API层面上，setState是普通的调用执行的函数，自然是同步API