React 事件机制

问题

React 事件机制

答案

React 其实⾃⼰实现了⼀套事件机制，⾸先我们考虑⼀下以下代码

const Test = ({ list, handleClick }) => ({
    list.map((item, index) => (
        <span onClick={handleClick} key={index}>{index}</span>
    ))
})
``

以上类似代码想必⼤家经常会写到，但是你是否考虑过点击事件是否绑定在了每⼀个标签
上？事实当然不是， JSX 上写的事件并没有绑定在对应的真实  DOM 上，⽽是通过事件
代理的⽅式，将所有的事件都统⼀绑定在了  document 上。这样的⽅式不仅减少了内存消
耗，还能在组件挂载销毁时统⼀订阅和移除事件。

另外冒泡到  document 上的事件也不是原⽣浏览器事件，⽽是  React ⾃⼰实现的合成
事件（ SyntheticEvent ）。因此我们如果不想要事件冒泡的话，调⽤
event.stopPropagation 是⽆效的，⽽应该调⽤  event.preventDefault

那么实现合成事件的⽬的是什么呢？总的来说在我看来好处有两点，分别是：


1. 合成事件⾸先抹平了浏览器之间的兼容问题，另外这是⼀个跨浏览器原⽣事件包装器，赋
予了跨浏览器开发的能⼒

2. 对于原⽣浏览器事件来说，浏览器会给监听器创建⼀个事件对象。如果你有很多的事件监
听，那么就需要分配很多的事件对象，造成⾼额的内存分配问题。但是对于合成事件来
说，有⼀个事件池专⻔来管理它们的创建和销毁，当事件需要被使⽤时，就会从池⼦中复
⽤对象，事件回调结束后，就会销毁事件对象上的属性，从⽽便于下次复⽤事件对象。

## 更多面试题

如果你想了解更多的前端面试题，可以查看本站的[WEB前端面试题](/edu/ask.html) ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。


<table class="reference">
    <tbody>
        <tr>
            <th colspan="3">面试题</th>
        </tr>
        <tr>
            <td> <a href="/map/html-focus.html">HTML</a></a></td>
            <td> <a href="/map/css-focus.html">CSS</a></td>
            <td> <a href="/map/js-focus.html">JavaScript</a></td>
        </tr>
        <tr>
            <td> <a href="/map/jquery-focus.html">jQuery</a></td>
            <td> <a href="/map/vue-focus.html">Vue.js</a></td>
            <td> <a href="/map/react-focus.html">React</a></td>
        </tr>
        <tr>
            <td> <a href="/map/logic-focus.html">算法</a></td>
            <td> <a href="/map/ajax-focus.html">HTTP</a></td>
            <td> <a href="/map/babel-focus.html">Babel</a></td>
        </tr>
        <tr>
            <td> <a href="/map/bootstrap-focus.html">BootStrap</a></td>
            <td> <a href="/map/electron-focus.html">Electron</a></td>
            <td> <a href="/map/gulp-focus.html">Gulp</a></td>
        </tr>
        <tr>
            <td> <a href="/map/nodejs-focus.html">Node.js</a></td>
            <td> <a href="/map/other-focus.html">前端经验相关</a></td>
            <td> <a href="/map/web-focus.html">前端综合</a></td>
        </tr>
        <tr>
            <td> <a href="/map/webpack-focus.html">Webpack</a></td>
            <td> <a href="/map/wechat-focus.html">微信小程序</a></td>
            <td> - </td>
        </tr>
      </tbody>
</table>

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！