您现在的位置是：首页 >技术杂谈 >react合成事件+底层原理+发展历程网站首页技术杂谈

React中的合成事件

合成事件是围绕浏览器原生事件，充当跨浏览器包装器的对象;它们将不同浏览器的行为合并为一个API，这样做是为了确保事件在不同浏览器中显示一致的属性!保证兼容性

合成事件的基本操作

基础语法：在JSX元素上，直接基于onXxx={函数} 进行事件绑定!浏览器标准事件，在React中大部分都支持

几个注意点

1.基于React内部的处理，如果我们给合成事件绑定一个普通函数，当事件行为触发，绑定的函数执行，方法中的this会是undefined

如何解决：

这是由于 JavaScript 中函数的 this 指向是动态的，会根据函数的调用方式而改变。在 React 中，给合成事件绑定的函数默认是普通函数（非箭头函数），并且函数中的 this 会默认指向 undefined。

解决这个问题有几种方法：

1. 使用箭头函数绑定事件处理函数：

handleClick = (ev) => {
  // 在箭头函数中，this 指向组件实例
   console.log(this); //实例
   console. log(ev); //SyntheticBaseEvent 合成事件对象「React内部经过特殊处理，把各个浏览器的事件对象统一化后，构建的一个事件对象」

}

render() {
  return <button onClick={this.handleClick}>Click me</button>
}

2. 在函数中使用 bind 方法将 this 绑定到组件实例：

handleClick(x,y,ev) {
  //只要方法经过bind处理了，那么最后-一个实参，就是传递的合成事件对象! !
  console.log(this, X, y, ev); //实例10 20合成事件对象

}

render() {
  return <button onClick={this.handleClick.bind(this.10,20)}>Click me</button>
}

3. 在构造函数中使用 bind 绑定方法：

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

handleClick() {
  // 在这个函数中，this 指向组件实例
}

render() {
  return <button onClick={this.handleClick}>Click me</button>
}

无论使用哪种方式，都可以保证在事件触发时，方法中的 this 指向组件实例。

为什么不能用call这些！！！因为call是立即执行函数！！！所以说只能够用bind。

最直接的解决方法！！！！绑定的时候就用箭头函数

这里使用箭头函数绑定可以让我们的函数的this指向这个实例

合成事件的底层机制

React 处理合成事件的底层原理主要包括以下几个方面：

1. 构建合成事件对象

React 通过在组件上面添加事件监听器的方式来处理事件，当事件触发时，会构建一个合成事件对象。合成事件对象是对原生 DOM 事件的一个封装，包含了一些特定于 React 的属性和方法，例如：

• nativeEvent：对应原生 DOM 事件对象
• target：事件目标
• currentTarget：事件处理器所在的组件
• preventDefault()：阻止默认行为
• stopPropagation()：阻止事件冒泡

2. 处理事件监听器

在调用组件的事件监听器时，React 会将原生 DOM 事件转换为一个合成事件对象，并将该合成事件对象传递给事件监听器。在事件监听器中，可以通过访问合成事件对象的属性来获取事件的相关信息。

需要注意的是，由于 React 对事件进行了委托处理，因此事件处理器并不是直接关联在真实的 DOM 元素上，而是注册在 React 的事件系统中。当事件触发时，React 会冒泡向上寻找组件树中注册了该事件处理器的组件，并将事件委派给该组件处理。经过这样的委托处理，React 保证了整个事件系统的高效运作。

3. 更新组件

在事件处理器执行过程中，可能会修改组件的状态或者触发其他某些操作，从而需要重新渲染组件。React 通过将事件处理器的返回值与当前渲染的组件进行比较，来确定是否需要重新渲染组件。

具体来说，当事件处理器执行完后，React 会重新计算组件的状态和属性，并与之前的状态和属性进行比较。如果状态或属性发生了改变，React 就会触发更新过程，重新渲染组件并更改对应的 DOM 元素。

限制

1.当前操作的事件必须支持冒泡传播机制才可以，例如: mouseenter/mouse Leave等事件是没有冒泡传播机制的

2.如果单独做的事件绑定中，做了事件传播机制的阻止，那么事件委托中的操作也不会生效! 也就是某个组件上注册的事件处理器中使用了事件对象的 stopPropagation() 方法来阻止了事件的冒泡，那么该事件将不会继续向上冒泡到其他组件中，也就无法委托给其他组件处理。因此，其他组件上通过 React 的事件委托机制注册的事件处理器不会被触发。

几个关于处理机制的问题

顺序不对！！！

所以我们这里的真实过程应该是这样的

React的合成事件机制是通过事件委托来实现的。具体来说，当你在某个组件上注册了事件处理函数时，React会把该事件委托给祖先元素来处理。在事件冒泡阶段，React会通过委托机制把事件传递给最近的祖先组件，从而实现事件处理和状态更新的目的。

在16之前拥有的问题？？？
1.在React16之前，当你在某个组件上注册了事件处理函数时，React会直接为该元素注册事件处理函数，而不是将其委托给组件的祖先元素。这意味着在早期版本的React中，每个组件都有自己独立的事件监听器，当事件触发时需要相应组件分别处理，导致事件触发和处理的次数过多，从而降低了React的性能和效率。为了解决这个问题，React16之后引入了事件委托机制，将事件委托给祖先元素进行处理。同时，由于事件在传递过程中会频繁地创建和销毁事件对象，而这些对象的创建和销毁会降低React的性能，因此React16也引入了合成事件对象池，避免了重复创建和销毁大量的事件对象，提高了React的性能和效率。

2.在React16之前的版本中，React在处理事件时会直接使用原生的事件对象，而不是使用合成事件对象。这样会导致一些潜在的问题，因为不同浏览器下事件对象的行为是不一致的，使用原生事件对象会增加React的跨浏览器兼容性的问题。

在React16版本
为了提高性能，事件的处理机制从原来的委托给根元素(#root)改为委托给document元素，并且只在冒泡阶段进行事件委托。这是因为早期React版本中，事件委托机制要把事件逐级传递给每个组件进行处理，非常耗费性能。借助委托给document元素的方式，可以减少不必要的事件触发和处理，从而提高React的性能和效率。

为了避免每次事件触发都需要重新创建新的合成事件对象，React在16版本中引入了“事件对象池”缓存机制。具体来说，当每次事件触发传播到委托的元素(document/#root)上时，React会统一处理内置事件对象生成合成事件对象。然后，React从事件对象池中获取存储的合成事件对象，并把信息赋值给相关的成员。等待本次操作结束后，React会把合成事件对象中的成员信息清空，并放回事件对象池中等待下一次使用。这种机制避免了重复创建和销毁大量的合成事件对象，从而提高了React的性能和效率。

React17
17及以后版本已经去除了事件对象池和缓存机制。由于现代浏览器支持的垃圾回收机制越来越高效，重复创建和销毁合成事件对象对性能的影响已经不明显。React认为去除事件对象池可以简化底层逻辑实现，减少代码的复杂性。

React18
18中并没有对合成事件的处理机制做出重大的调整，仍然采用了委托机制和在16版本中引入的合成事件对象池。不过，React18中引入了实验性的事件优先级调度机制。该机制根据事件的类型和触发的位置计算出事件的优先级，然后把事件加入到一个优先级队列中。React根据当前应用的状态和性能情况，动态地决定哪些事件应该先被处理，哪些可以等待。这种机制可以提升React应用的响应速度和性能，具有一定的优势和潜力。