React 合成事件机制

[sl1673495]

首先文档上的概念要摸清楚。 https://zh-hans.reactjs.org/docs/events.html

[sl1673495]

https://www.w3.org/TR/DOM-Level-3-Events/

先复习一下原生DOM事件。

事件分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

事件处理函数在目标阶段触发，如果此时调用了 e.stopPropagation() 的话，后续的冒泡阶段就会取消。

具体定义

捕获阶段：通过从目标的祖先中的事件对象传播窗口到目标的父。此阶段也称为捕获阶段。

目标阶段：本次活动对象到达事件对象的事件的目标。此阶段也称为目标阶段。如果事件类型指示事件不会冒泡，则事件对象将在此阶段完成后停止。

冒泡阶段：通过以相反的顺序目标的祖先中的事件对象传播，开始与目标的父和与所述结束窗口。此阶段也称为冒泡阶段。

stopPropagation 和 stopImmediatePropagation 区别

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation

[sl1673495]

React 事件

https://zh-hans.reactjs.org/docs/events.html

两个小操作：

1. e.persist 保留事件，在异步中也可以使用，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

2. 在事件命名后面加 Capture，可以改成捕获阶段触发，如 onClickCapture。

事件会被存放在事件池中统一管理。

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // 不起作用，this.state.clickEvent 的值将会只包含 null
  this.setState({clickEvent: event});

  // 你仍然可以导出事件属性
  this.setState({eventType: event.type});
}

[sl1673495]

React 合成事件优点：

1. 最大程度上解决了 IE 等浏览器的不兼容问题
2. 事件绑定到Document上，减少事件绑定的开销。
3. React 通过对象池的形式管理合成事件对象的创建和销毁，减少了垃圾的生成和新对象内存的分配，提高了性能。
4. 事件合成，即事件自定义，React 可以更加自由的定义事件，比如表单的一些onChange事件。
5. 抽象跨平台事件机制，这点和VirtualDOM的意义相似。
6. React打算干预事件的分发，不同类型的事件有不同的优先级，比如高优先级的事件可以中断渲染，让用户代码可以及时响应用户交互。