面试题：React事件处理中等难度：合成事件与原生事件性能差异

性能差异

事件委托机制：
- 合成事件：React 使用事件委托机制，将所有事件统一绑定到文档根节点（通常是 document）。当事件触发时，React 通过事件冒泡机制，从触发元素向上查找，直到找到注册该事件处理函数的组件。这种方式减少了事件绑定的数量，从而提升性能。例如，在一个包含大量列表项的 ul 中，每个 li 都有点击事件，如果使用原生事件，需要为每个 li 都绑定点击事件处理函数；而使用合成事件，只需要在 ul 上绑定一个点击事件处理函数，通过事件.target 判断具体点击的 li 元素。
- 原生事件：原生事件通常是直接绑定到目标元素上。如果有大量元素需要绑定相同类型的事件，会导致每个元素都有一个独立的事件处理函数引用，增加内存开销。比如上述大量 li 元素都绑定原生点击事件，会占用较多内存。
跨浏览器兼容性：
- 合成事件：React 对合成事件进行了封装，提供了统一的跨浏览器事件接口。React 内部处理了不同浏览器事件对象的差异，开发者无需关心特定浏览器的兼容性问题，这在一定程度上提升了开发效率，间接对性能有积极影响，因为开发者无需为兼容性编写额外代码。例如，event.preventDefault() 在不同浏览器下可能有细微差异，合成事件封装后开发者可统一使用，减少兼容性代码编写。
- 原生事件：原生事件需要开发者手动处理跨浏览器兼容性问题。例如，获取事件目标元素，在 IE 浏览器中使用 event.srcElement，而在其他标准浏览器中使用 event.target，这会增加代码量，可能影响性能，尤其是在复杂应用中兼容性代码较多时。
事件处理函数执行效率：
- 合成事件：合成事件在执行时，React 会对事件进行批处理。在 React 的更新机制中，多个合成事件触发的状态更新会被批量处理，只进行一次 DOM 重渲染，从而减少不必要的重渲染次数，提升性能。例如，在一个组件中有多个按钮点击事件，每个点击事件都触发状态更新，如果是合成事件，React 会将这些更新合并，一次性更新 DOM。
- 原生事件：原生事件触发后，立即执行对应的事件处理函数。如果在原生事件处理函数中频繁触发状态更新，会导致多次 DOM 重渲染，降低性能。比如在一个原生点击事件处理函数中多次改变组件状态，会引起多次不必要的 DOM 重绘和回流。

场景分析

合成事件性能优势场景：
- 列表渲染场景：如电商商品列表展示，每个商品项可能有点击查看详情等交互。使用合成事件，通过在列表容器（如 ul）上绑定事件，利用事件委托机制，能有效减少事件绑定数量，提升性能。例如：

import React, { useState } from'react';

const ItemList = () => {
    const [clickedItem, setClickedItem] = useState(null);
    const handleClick = (event) => {
        setClickedItem(event.target.dataset.itemId);
    };
    const items = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));
    return (
        <ul onClick={handleClick}>
            {items.map(item => (
                <li key={item.id} data - itemId={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

export default ItemList;

表单交互场景：在一个包含多个输入框、按钮等表单元素的页面中，使用合成事件可以利用 React 的批处理机制，减少 DOM 重渲染次数。比如一个注册表单，用户填写多个输入框并点击提交按钮，合成事件可将输入框的 onChange 事件和按钮的 onClick 事件触发的状态更新进行批处理。

原生事件合适场景：
- 与浏览器特定功能紧密结合场景：如页面滚动监听获取页面滚动距离，原生事件 window.addEventListener('scroll', () => { /* 处理逻辑 */ }) 能直接获取浏览器滚动信息，使用合成事件无法直接实现此功能。例如实现一个返回顶部按钮，当页面滚动到一定距离时显示按钮，使用原生滚动事件很方便：

import React, { useEffect } from'react';

const ScrollButton = () => {
    useEffect(() => {
        const handleScroll = () => {
            if (window.pageYOffset > 100) {
                // 显示返回顶部按钮逻辑
            } else {
                // 隐藏返回顶部按钮逻辑
            }
        };
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    return <button>返回顶部</button>;
};

export default ScrollButton;

性能优化特定场景：当需要精确控制事件触发时机和处理逻辑，且已知不会因频繁触发导致性能问题时，原生事件可能更合适。例如，在一个简单动画交互中，需要在元素点击瞬间执行一个复杂动画逻辑，原生事件可直接绑定到元素上立即执行动画，无需经过 React 的事件委托和批处理流程。

星途面试题库

面试题：React事件处理中等难度：合成事件与原生事件性能差异

知识考点

面试题答案

性能差异

场景分析