面试题：React 事件委托对性能优化的原理及实践

React 事件委托优化性能的原理

减少 DOM 事件绑定数量：在传统的 DOM 编程中，为每个元素单独绑定事件处理器，会导致大量的事件监听器，占用内存并且降低性能。而 React 使用事件委托，将所有的事件都绑定到文档根节点（通常是 document）上。例如，假设有 1000 个列表项，传统方式需绑定 1000 个点击事件监听器，而 React 事件委托只需在根节点绑定 1 个点击事件监听器。
事件冒泡机制：当一个事件发生在子元素上时，事件会沿着 DOM 树向上冒泡，直到到达根节点。React 利用这个机制，在根节点统一处理所有冒泡上来的事件。通过检查事件.target 属性，React 可以确定事件实际发生的目标元素，从而执行相应的处理逻辑。

大量动态生成列表项的性能优化代码实现

import React, { useState } from'react';

const ListItem = ({ item, handleClick, handleMouseEnter, handleMouseLeave }) => {
    return (
        <li
            onClick={() => handleClick(item)}
            onMouseEnter={() => handleMouseEnter(item)}
            onMouseLeave={() => handleMouseLeave(item)}
        >
            {item.text}
        </li>
    );
};

const List = () => {
    const [items, setItems] = useState([
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // 假设大量动态生成的列表项
    ]);
    const handleClick = (item) => {
        console.log(`Clicked on ${item.text}`);
    };
    const handleMouseEnter = (item) => {
        console.log(`Mouse entered ${item.text}`);
    };
    const handleMouseLeave = (item) => {
        console.log(`Mouse left ${item.text}`);
    };

    return (
        <ul>
            {items.map(item => (
                <ListItem
                    key={item.id}
                    item={item}
                    handleClick={handleClick}
                    handleMouseEnter={handleMouseEnter}
                    handleMouseLeave={handleMouseLeave}
                />
            ))}
        </ul>
    );
};

export default List;

在上述代码中，虽然看起来每个 <ListItem> 都绑定了事件，但实际上 React 会将这些事件委托到根节点处理。

注意要点

事件委托范围：虽然 React 事件委托默认绑定到根节点，但在某些情况下，例如在一个复杂的组件树中，如果只想在某个特定的父组件范围内处理事件委托，可以通过自定义事件委托的方式，将事件绑定到特定的父组件上。
性能瓶颈场景：在一些极端情况下，大量事件快速冒泡到根节点可能会导致性能问题。比如在一个包含成千上万个快速交互元素的列表中，事件处理函数执行时间较长，可能会造成卡顿。这时可以考虑进一步优化事件处理逻辑，如防抖、节流等策略。
事件对象兼容性：在事件处理函数中访问事件对象时，要注意 React 对事件对象进行了合成，它的行为和原生事件对象不完全相同。例如，合成事件对象的属性和方法可能存在差异，需要按照 React 的文档规范来使用。
动态添加移除元素：当列表项动态添加或移除时，React 能够自动管理事件委托的绑定和解绑，开发者无需手动处理。但要注意确保在添加或移除元素的逻辑中，不会意外干扰到事件委托机制。

面试题：React 事件委托对性能优化的原理及实践

知识考点

面试题答案

React 事件委托优化性能的原理

大量动态生成列表项的性能优化代码实现

注意要点