React事件委托

React 事件委托（Event Delegation）是一种优化事件处理的技术，它通过将事件监听器添加到父级元素（而不是子元素）来实现。当事件触发时，事件会向上冒泡到父元素，然后在父元素上调用事件处理函数。通过事件委托，可以减少添加到 DOM 元素的事件监听器数量，从而提高性能。

在 React 中，事件委托自动由 React 事件系统处理，你无需手动实现它。React 事件系统创建了一个事件监听器，将它添加到应用的根元素（通常是 #root）。所有的事件都会冒泡到根元素，然后 React 根据事件的类型和目标元素来调用相应的事件处理函数。

由于 React 使用了事件委托，这使得在动态创建和销毁元素时，事件处理效率更高。如果没有事件委托，每次创建一个新元素时，你都需要为它添加一个新的事件监听器。同样，在销毁元素时，你需要手动移除事件监听器，以避免内存泄漏。而使用事件委托，React 可以处理所有这些问题，同时提高应用程序的性能。

下面是一个简单的 React 事件处理示例，展示了如何在 React 中使用事件委托：

import React, { Component } from 'react';

class App extends Component {
  handleClick = (event) => {
    alert(`Clicked on: ${event.target.textContent}`);
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
      </div>
    );
  }
}

export default App;

在这个例子中，我们将 onClick 事件处理器添加到了父级 <div> 元素。无论我们点击哪个按钮，都会触发 handleClick 函数。这是一个简单的事件委托示例，展示了如何在 React 中利用事件冒泡来优化事件处理。

如果还不明白的话，通过更接近业务的例子，深入体会一下React的事件委托的伟大！

下面是一个更实际的例子，这里我们创建了一个任务列表，当点击任务时，会将其标记为已完成。这个例子展示了如何利用事件委托来减少事件处理器的数量，提高性能。

import React, { Component } from 'react';

class TodoList extends Component {
  state = {
    todos: [
      { id: 1, text: 'Learn React', completed: false },
      { id: 2, text: 'Build a project', completed: false },
      { id: 3, text: 'Deploy to server', completed: false }
    ]
  };

  handleTodoClick = (event) => {
    const targetId = parseInt(event.target.getAttribute('data-id'));
    if (!targetId) return;

    this.setState((prevState) => ({
      todos: prevState.todos.map((todo) =>
        todo.id === targetId ? { ...todo, completed: !todo.completed } : todo
      )
    }));
  };

  render() {
    return (
      <ul onClick={this.handleTodoClick}>
        {this.state.todos.map((todo) => (
          <li
            key={todo.id}
            data-id={todo.id}
            style={{
              textDecoration: todo.completed ? 'line-through' : 'none'
            }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    );
  }
}

export default TodoList;

在这个例子中，我们有一个待办事项列表。我们将 onClick 事件处理程序添加到了父级 <ul> 元素。当我们点击其中一个待办事项时，handleTodoClick 函数会根据待办事项的 data-id 属性找到相应的待办事项，并将其标记为已完成。

如果没有事件委托，我们需要为每个 <li> 元素添加单独的事件处理程序。当待办事项列表很大时，这将导致大量的事件监听器。通过使用事件委托，我们只需在父级元素上添加一个事件处理程序，从而大大提高性能。

这个例子展示了事件委托如何在实际应用中减少事件处理器数量，优化性能。