事件委托和事件池

React 的合成事件是通过事件委托（event delegation）和事件池（event pooling）的机制来实现的。下面是合成事件的简单原理介绍：

1、 事件委托：React 使用事件委托将事件处理函数附加到父元素上，而不是直接将事件处理函数附加到每个子元素上。这意味着只需要一个事件监听器来处理整个组件树中的所有事件。当事件发生时，事件会冒泡到父元素，然后由 React 在父元素上触发相应的事件处理函数。

2、 事件池：React 使用事件池来重用事件对象，以减少内存分配和垃圾回收的开销。当事件发生时，React 会从事件池中获取一个事件对象，并将相关的信息（如事件类型、目标元素等）填充到事件对象中。然后，事件对象会被传递给事件处理函数。在事件处理完成后，React 会将事件对象重置，并放回事件池中，以便下次重用。

合成事件的原理带来了一些优势：

1、 跨浏览器兼容性：React 的合成事件封装了底层浏览器差异，使得事件在不同浏览器中表现一致，无需开发者自己处理兼容性问题。

2、 性能优化：通过事件委托，React 可以减少事件监听器的数量，从而提高性能。而且，事件池的机制可以减少内存分配和垃圾回收的开销，提升整体性能。

3、 事件代理：事件委托使得 React 可以在父组件上捕获事件，并根据事件的目标元素来触发相应的事件处理函数。这样可以更灵活地处理事件，而不需要为每个子元素都添加事件监听器。

4、 合成事件属性：React 的合成事件对象提供了一些额外的属性，例如 event.target、event.currentTarget、event.preventDefault() 等，方便开发者对事件进行处理和控制。

总结起来，React 的合成事件通过事件委托和事件池的机制，提供了跨浏览器兼容性、性能优化、事件代理和额外的事件属性等优势，使得事件处理更加方便和高效。

事件池

合成事件 SyntheticEvent 对象会被放入池中统一管理。这意味着 SyntheticEvent 对象可以被复用，当所有事件处理函数被调用之后，其所有属性都会被置空。

例如，以下代码是无效的：

function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

如果你需要在事件处理函数运行之后获取事件对象的属性，你需要调用 e.persist()：

function handleChange(e) {
  // Prevents React from resetting its properties:
  e.persist();


  setTimeout(() => {
    console.log(e.target.value); // Works
  }, 100);
}

以下是一个简单的代码演示，展示如何使用事件池：

var eventPool = {
  events: [],


  getEvent: function(eventType) {
    if (this.events.length > 0) {
      return this.events.pop();
    } else {
      return { type: eventType };
    }
  },


  releaseEvent: function(event) {
    event.target = null;
    event.currentTarget = null;
    this.events.push(event);
  }
};


// 使用事件池对象获取和释放事件
var eventType = 'click';
var event = eventPool.getEvent(eventType);


// 模拟事件处理
console.log('处理事件:', event);


// 释放事件到事件池
eventPool.releaseEvent(event);

实际上，React 17 不再使用事件池的概念。React 17 引入了一个新的事件系统，称为"无池事件系统"（No Pooling Event System）。

在之前的 React 版本中，事件池的目的是为了重用事件对象，以减少内存分配和垃圾回收的开销。然而，随着现代浏览器的发展和性能改进，以及对 React 内部事件系统的优化，事件池的性能优势逐渐减弱。

React 17 的无池事件系统采用了一种新的事件处理机制，它不再重用事件对象，而是在每次事件触发时创建一个新的事件对象。这样做的主要原因是，现代浏览器在处理大量短暂的事件对象时，已经具备了很好的性能优化能力，不再需要手动管理事件对象的重用。

<button id="myButton">点击我</button>


<script>
  function simulateSyntheticEvent(element, eventType) {
    var event = new CustomEvent(eventType, {
      bubbles: true,
      cancelable: true,
    });
    element.dispatchEvent(event);
  }


  function handleClick(event) {
    console.log('点击事件触发');
  }


  var button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);


  // 模拟点击事件
  simulateSyntheticEvent(button, 'click');
</script>

通过移除事件池，React 17 在事件处理方面获得了一些优势：

1、 更好的跨浏览器兼容性：不再需要担心不同浏览器对事件池的支持和行为差异。

2、 更简化的代码逻辑：无需关注事件对象的释放和重用，减少了开发者需要处理的细节。

3、 更好的可维护性和可扩展性：去除事件池使 React 内部的事件系统更加简洁和灵活，有助于未来的优化和改进。

需要注意的是，尽管 React 17 不再使用事件池，但它仍然提供了一套强大的合成事件机制，使开发者可以方便地处理和管理事件。你可以像之前一样，在 React 组件中定义事件处理函数，并将其传递给相应的事件属性，React 将负责处理事件的创建和传递。

综上所述，React 17 不再使用事件池的原因是为了简化代码逻辑、提供更好的跨浏览器兼容性，并利用现代浏览器的性能优化能力。