面试题：React事件监听器与原生事件监听器的差异及应用场景

主要区别

事件绑定方式
- React：采用驼峰命名法（如onClick），在JSX中直接绑定到组件元素上。例如：<button onClick={this.handleClick}>点击</button>。
- 原生JavaScript：通过addEventListener方法，以字符串形式指定事件类型（如'click'）。例如：document.getElementById('myButton').addEventListener('click', function() { /* 处理逻辑 */ });。
事件处理函数的作用域
- React：事件处理函数内部this指向组件实例（前提是正确绑定this，如通过构造函数this.handleClick = this.handleClick.bind(this)，或使用箭头函数）。
- 原生JavaScript：事件处理函数内部this通常指向触发事件的DOM元素。
事件冒泡机制
- React：合成事件（SyntheticEvent）采用事件委托机制，将所有事件绑定到顶层document对象上，模拟冒泡行为。这样可以减少内存开销，提高性能。
- 原生JavaScript：按照标准的DOM事件冒泡机制，从触发事件的目标元素开始，逐级向上传播到DOM树的根节点。
事件对象
- React：提供合成事件对象（SyntheticEvent），它是对原生事件对象的跨浏览器包装，具有统一的接口，在不同浏览器中表现一致。
- 原生JavaScript：不同浏览器的原生事件对象可能存在差异，需要进行兼容性处理。

选择场景及举例

选择React事件监听器的场景
- 构建React组件化应用：当开发基于React的单页应用（SPA）时，使用React事件监听器可以更好地与组件的生命周期和状态管理集成。例如，在一个待办事项列表组件中：

import React, { Component } from'react';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = { todos: [] };
        this.addTodo = this.addTodo.bind(this);
    }

    addTodo() {
        // 处理添加待办事项逻辑，更新状态
        this.setState({ todos: [...this.state.todos, '新待办事项'] });
    }

    render() {
        return (
            <div>
                <button onClick={this.addTodo}>添加待办事项</button>
                <ul>
                    {this.state.todos.map((todo, index) => (
                        <li key={index}>{todo}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default TodoList;

- **方便的状态管理和组件交互**：React事件监听器能方便地与`setState`配合，实现组件状态的更新和组件间的通信。

2. 选择原生事件监听器的场景 - 操作非React管理的DOM元素：当需要对React组件外部的DOM元素（如第三方库创建的元素）添加事件监听器时，使用原生事件监听器。例如，引入一个第三方的地图库（如Leaflet），要在地图的某个图层上添加点击事件：

import React, { Component } from'react';
import L from 'leaflet';

class MapComponent extends Component {
    componentDidMount() {
        const map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        const layer = L.marker([51.5, -0.09]).addTo(map);
        layer.getElement().addEventListener('click', function() {
            console.log('地图标记被点击');
        });
    }

    render() {
        return <div id="map" style={{ height: '400px' }} />;
    }
}

export default MapComponent;

- **性能优化特定场景**：在一些性能敏感的场景，如需要处理大量DOM元素的频繁事件，原生事件监听器直接绑定到目标元素，避免了React合成事件的委托开销，可能会有更好的性能表现。但这种情况比较少见，因为React的事件委托机制在大多数情况下已经足够高效。

星途面试题库

面试题：React事件监听器与原生事件监听器的差异及应用场景

知识考点

面试题答案

主要区别

选择场景及举例