React合成事件和jsDOM事件的区别

js事件：
①小写命名

<button onclick="activateLasers()">激活按钮</button>

②阻止默认事件
点我

React合成事件
事件驼峰命名

<button onClick={activateLasers}>激活按钮</button>

②阻止默认事件( e.preventDefault()?

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('链接被点击');
  }
  return (
    <a href="#" onClick={handleClick}>
      点我
    </a>
  );
}

react事件 是一个合成事件。使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

在 React 底层，主要对合成事件做了两件事:事件委派和自动绑定。

1. 事件委派
   在使用 React 事件前，一定要熟悉它的事件代理机制。它并不会把事件处理函数直接绑定到 真实的节点上，而是把所有事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监 听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是 在这个统一的事件监听器上插入或删除一些对象;当事件发生时，首先被这个统一的事件监听器 处理，然后在映射里找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制，效率 也有很大提升。
2. 自动绑定
   在 React 组件中，每个方法的上下文都会指向该组件的实例，即自动绑定 this 为当前组件。 而且 React 还会对这种引用进行缓存，以达到 CPU 和内存的最优化。在使用 ES6 classes 或者纯 函数时，这种自动绑定就不复存在了，我们需要手动实现 this 的绑定。