面试题：React事件委托机制下的事件处理函数绑定

Question

在一个包含大量列表项的React组件中，每个列表项都需要绑定点击事件。从事件委托的角度出发，阐述如何高效地绑定这些点击事件处理函数，并给出关键代码片段，同时说明与直接为每个列表项绑定事件相比的优势。

Answer 1

事件委托实现方式

1. 原理：利用事件冒泡机制，将事件处理函数绑定在父元素上，而非每个列表项。当子元素触发事件时，事件会冒泡到父元素，父元素通过判断事件源来确定是哪个子元素触发了事件。
2. 关键代码片段：

import React, { useState } from 'react';

const ListComponent = () => {
  const listItems = Array.from({ length: 1000 }, (_, i) => i + 1);
  const [clickedItem, setClickedItem] = useState(null);

  const handleClick = (event) => {
    // 判断点击的是哪个列表项
    const itemValue = event.target.textContent;
    setClickedItem(itemValue);
  };

  return (
    <div onClick={handleClick}>
      {listItems.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

export default ListComponent;

与直接为每个列表项绑定事件相比的优势

1. 性能提升：直接为每个列表项绑定事件会创建大量的事件处理函数实例，占用更多的内存和资源。而事件委托只在父元素上绑定一个事件处理函数，大大减少了内存开销，尤其在列表项数量庞大时，性能提升显著。
2. 易于维护：当需要修改事件处理逻辑时，只需修改父元素上的事件处理函数，而不需要逐个修改每个列表项的事件绑定，降低了代码维护成本。
3. 动态内容支持：对于动态添加或移除的列表项，事件委托不需要重新绑定事件。因为父元素的事件处理函数始终存在，新添加的子元素触发的事件依然会冒泡到父元素并被处理，而直接绑定事件需要为新添加的元素重新绑定事件。