面试题：React事件代理在动态组件中的应用

Question

有一个React应用，会根据用户操作动态添加和删除按钮组件。每个按钮点击后要执行不同的逻辑（例如，有的按钮用于保存数据，有的用于取消操作）。请使用事件代理的方式实现这个功能，并阐述这样做相较于给每个按钮单独绑定事件的优势在哪里。

Answer 1

实现代码

import React, { useState } from 'react';

const ButtonContainer = () => {
  const [buttons, setButtons] = useState([]);
  const handleButtonClick = (event) => {
    const action = event.target.dataset.action;
    if (action ==='save') {
      console.log('执行保存数据逻辑');
    } else if (action === 'cancel') {
      console.log('执行取消操作逻辑');
    }
  };
  const addButton = (action) => {
    setButtons([...buttons, { id: Date.now(), action }]);
  };
  const removeButton = (buttonId) => {
    setButtons(buttons.filter(button => button.id!== buttonId));
  };
  return (
    <div>
      <button onClick={() => addButton('save')}>添加保存按钮</button>
      <button onClick={() => addButton('cancel')}>添加取消按钮</button>
      <div onClick={handleButtonClick}>
        {buttons.map(button => (
          <button key={button.id} data-action={button.action}>
            {button.action ==='save'? '保存' : '取消'}
            <button onClick={() => removeButton(button.id)}>删除</button>
          </button>
        ))}
      </div>
    </div>
  );
};

export default ButtonContainer;

事件代理优势

1. 性能优化：给每个按钮单独绑定事件，随着按钮数量的增加，内存中会存在大量的事件处理函数，占用较多内存。而事件代理只需要在父元素上绑定一个事件处理函数，大大减少了内存开销，提升性能。
2. 动态元素支持：当动态添加或删除按钮时，事件代理无需重新绑定事件。因为事件是绑定在父元素上，新添加的按钮的点击事件依然会冒泡到父元素，由父元素的事件处理函数处理。而单独绑定事件，每次添加或删除按钮都需要重新绑定或解绑事件，操作繁琐。
3. 代码简洁：事件代理的方式，事件处理逻辑集中在一个地方，代码结构更加清晰简洁，便于维护和修改。而每个按钮单独绑定事件，会使代码中充斥大量相似的事件绑定逻辑，增加代码冗余度。