目录
- 1，React 事件大致原理
- 1.1，几乎所有的事件处理，都在 document 的事件中处理。
- 1.2，事件参数
- 2，注意事项
1，React 事件大致原理
这里讨论的事件，是指在 React 内置组件上绑定的事件。
大致原理：
1，React 为了提升效率，利用事件冒泡的原理，直接给 document 对象上注册对应的事件（会遍历拿到所有可能的事件）。
比如，当点击某个元素后，点击事件最终冒泡到 document 对象上，然后再去虚拟DOM树的节点中查看，有那些节点绑定了点击事件，依次执行。
所以，
1，手动给真实DOM上绑定的事件，永远先于 React 元素上的事件执行。
2，在真实的 DOM 上绑定事件后，如果阻止了事件冒泡（不会冒泡到document对象），那 React 元素上的相同事件就不会执行了。
2，当要触发某个 React 组件上绑定的事件时，React 会在虚拟DOM树中找对应的元素节点，并从最底层的元素节点开始执行对应的事件（可能有不同层级绑定了相同的事件）。
举例：
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));document.getElementById("root").addEventListener("click", () => {console.log("root");
});
src/App.js
import React, { PureComponent } from "react";export default class App extends PureComponent {render() {return (<buttononClick={() => {console.log("app");}}>点我</button>);}
}
当点击按钮时，会先打印 root，再打印 app。
原因：先执行了真实DOM上的事件，一直冒泡到 document 上，再去虚拟DOM树中找绑定了相同事件的元素节点，执行对应事件。
1.1，几乎所有的事件处理，都在 document 的事件中处理。
说几乎是因为，
- 有些事件就不冒泡，那就直接在元素上监听，比如 input 的聚焦事件。
- 有的事件 document 上没有，比如 video 的一些事件。
1.2，事件参数
React 的事件参数，是经过处理的一个对象，和真实的DOM事件参数类似：
stopPropagation，阻止事件在虚拟DOM树中冒泡。nativeEvent，可以得到真实的DOM事件对象。- 为了提高执行效率，React使用事件对象池来处理事件对象。
对象池：会缓存事件对象，重复使用。
import React, { PureComponent } from "react";export default class App extends PureComponent {render() {let tempE = null;return (<divonClick={(e) => {console.log(tempE === e); // true}}><buttononClick={(e) => {tempE = e;}}>App</button></div>);}
}
2，注意事项
知道了大致原理之后，就需要注意一些可能的问题：
- 如果给真实的DOM注册事件，阻止了事件冒泡，则会导致 React 元素的相同事件无法触发。
- 如果给真实的DOM注册事件，事件会先于React事件运行。
- 通过React的事件中阻止事件冒泡，无法阻止真实的DOM事件冒泡。
- 可以通过
nativeEvent.stopImmediatePropagation()，阻止document上剩余事件的执行。（几乎用不到） - 在事件处理程序中，不要异步的使用事件对象，如果一定要使用，需要调用
persist函数。
异步举例：虽然会输出对象，但所有属性都是 null。
<buttononClick={(e) => {setTimeout(() => {console.log(e);}, 1000);}}
>App
</button>
进行持久化，就能正常获取事件对象了。
<buttononClick={(e) => {e.persist();setTimeout(() => {console.log(e);}, 1000);}}
>App
</button>
以上。
)
