
      <h2>
        <span class="prefix"></span>
        <span class="content">事件合成</span>
        <span class="suffix"></span>
      </h2>
    
      <h3>
        <span class="prefix"></span>
        <span class="content">什么事件合成</span>
        <span class="suffix"></span>
      </h3>
    <p>在react中，我们绑定的事件<code>onClick</code>等，并不是原生事件，而是由原生事件合成的React事件，比如<code>click</code>事件合成为<code>onClick</code>事件。比如<code>blur</code>, <code>change</code>, <code>input</code>, <code>keydown</code>, <code>keyup</code>等 , 合成为<code>onChange</code></p>

      <h3>
        <span class="prefix"></span>
        <span class="content">为什么要合成事件</span>
        <span class="suffix"></span>
      </h3>
    <p>统一管理，消除浏览器差异性</p>

      <h3>
        <span class="prefix"></span>
        <span class="content">事件触发流程</span>
        <span class="suffix"></span>
      </h3>
    <ol>
<li>执行<code>dispatchEvent</code></li>
<li>创建事件对应的合成事件<code>SyntheticEvent</code></li>
<li>收集捕获的回调函数和对应的节点实例</li>
<li>收集冒泡的回调函数和对应的节点实例</li>
<li>执行对应的回调函数，同时将<code>SyntheticEvent</code>作为参数传入</li>
</ol>

      <h3>
        <span class="prefix"></span>
        <span class="content">注意</span>
        <span class="suffix"></span>
      </h3>
    <ul>
<li>原生事件的执行先于合成事件</li>
</ul>

      <h2>
        <span class="prefix"></span>
        <span class="content">路由懒加载/代码分割</span>
        <span class="suffix"></span>
      </h2>
    <p>webpack遇到<code>import()</code>时会将引入的模块打包成独立的bundle （<code>import()</code>函数会返回一个Promise），需要时会异步加载这些bundle</p>


## 事件合成

### 什么事件合成

在react中，我们绑定的事件`onClick`等，并不是原生事件，而是由原生事件合成的React事件，比如`click`事件合成为`onClick`事件。比如`blur`, `change`, `input`, `keydown`, `keyup`等 , 合成为`onChange`

### 为什么要合成事件

统一管理，消除浏览器差异性

###

React.js复习-0

事件合成

什么事件合成

为什么要合成事件

事件触发流程

注意

路由懒加载/代码分割