当前位置：首页 > news >正文

React事件委托

news 2025/7/21 15:13:29

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) => (<likey={todo.id}data-id={todo.id}style={{textDecoration: todo.completed ? 'line-through' : 'none'}}>{todo.text}</li>))}</ul>);}
}export default TodoList;