React08详解事件监听的实现

• 以点击事件为例子，使用方法如下:

        

• 由于react的this指向问题，所以在事件绑定时要特别注意，否则会出现bug
• 一般使用的事件绑定写法有三种

         《1》第一种利用bind绑定，写法如下，这种比较少用

            

            《2》第二种箭头函数写法，这种比较常用

                

             《3》第三种直接使用箭头函数返回一个函数

                

解释：render函数里面写的都是虚拟dom，this指向undefined。那么点击事件调用的函数，其内部的this指向是谁调用就指向谁，所以里面的this也是指向undefined，因此必须用方法处理this指向。

• 探究此时的this为什么会指向undefined？

        在严格模式下，callback会失去它的this上下文。在React class组件中，事件的handle 方法给回掉函数的传参，在执行click事件时类似于 element.addEventListener('click', callback, false)，该callback失去了隐式绑定的上下文，指向了全局对象，严格模式下的this值为 undefined。

        实际上 element.addEventListener('click', callback, false) 中的 callback中的this，指向当前element。在React中的事件是合成事件，我的理解是将callback进行一次参数透传，this是在这里失去上下文的。

react-dom 中 合成事件的处理源码：