面试题：深入剖析 React 事件处理中的合成事件池

合成事件池工作原理

事件对象的创建：
- 在 React 应用中，当一个原生 DOM 事件触发时，React 并不会直接使用原生事件对象。而是基于原生事件，创建一个合成事件对象（SyntheticEvent）。这个合成事件对象会包含与原生事件类似的属性，例如 target、type、preventDefault 等方法。React 这样做是为了实现浏览器兼容性，并且能够以统一的方式处理不同浏览器的事件差异。同时，合成事件是挂载在 document 上的，采用事件委托机制，减少事件处理程序的数量，提高性能。
回收复用机制：
- 为了提高性能，React 使用对象池来管理合成事件对象。当一个事件触发时，React 从事件池中取出一个可用的合成事件对象，并填充原生事件的相关信息。当事件处理函数执行完毕后，该合成事件对象并不会被立即销毁，而是被放回事件池中，等待下次事件触发时再次复用。这样可以避免频繁创建和销毁对象带来的性能开销。例如，在一个频繁触发点击事件的按钮上，每次点击都复用事件池中的合成事件对象，而不是重新创建。

高并发事件场景下可能遇到的问题及解决方案

问题：
- 事件对象属性不一致：在高并发场景下，由于事件对象复用，如果上一个事件处理函数没有及时处理完毕，而下一个事件又复用了同一个事件对象，可能会导致事件对象中的属性值出现混淆。例如，上一个事件处理函数正在异步操作，还未完全处理完事件，下一个事件复用该事件对象并修改了 target 属性，可能会使异步操作中使用到错误的 target 值。
- 异步操作问题：如果在事件处理函数中存在异步操作（如 setTimeout、Promise 等），并且事件对象在异步操作完成前被回收复用，那么异步操作中使用的事件对象可能已经被修改，导致数据不一致或错误。例如，在一个点击事件处理函数中发起一个异步网络请求，请求未完成时事件对象被回收复用，网络请求回调中使用的事件对象可能已经不是最初的状态。
解决方案：
- 手动克隆事件对象：对于可能存在异步操作的场景，开发者可以手动克隆事件对象。React 的合成事件对象提供了 clone 方法，通过调用这个方法可以创建一个新的独立的事件对象副本。这样，即使原事件对象被回收复用，克隆的事件对象依然保持最初的状态，不会受到影响。例如：

import React from'react';

const MyComponent = () => {
    const handleClick = (event) => {
        const clonedEvent = event.clone();
        setTimeout(() => {
            // 这里使用clonedEvent，不会受到事件对象复用的影响
            console.log(clonedEvent.target);
        }, 1000);
    };

    return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

使用闭包保存事件对象属性：在事件处理函数中，将需要在异步操作中使用的事件对象属性提前保存到闭包中。这样，即使事件对象被回收复用，闭包中的属性值依然是最初的状态。例如：

import React from'react';

const MyComponent = () => {
    const handleClick = (event) => {
        const target = event.target;
        setTimeout(() => {
            // 使用保存的target，不会受到事件对象复用的影响
            console.log(target);
        }, 1000);
    };

    return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

星途面试题库

面试题：深入剖析 React 事件处理中的合成事件池

知识考点

面试题答案

合成事件池工作原理

高并发事件场景下可能遇到的问题及解决方案