阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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!
      目录
      本文目录
      目录