面试题：React中合成事件与原生事件在事件处理上的差异及应用场景

Question

阐述React合成事件与原生JavaScript事件在事件处理机制、事件池、兼容性等方面的差异，并举例说明在什么场景下更适合使用合成事件，什么场景下可能需要使用原生事件。

Answer 1

事件处理机制差异

• React合成事件：采用统一的事件委托机制，将所有事件统一绑定到最外层的DOM元素（通常是document）。当事件触发时，React会根据事件类型和目标元素，通过事件冒泡的方式找到对应的组件实例，并调用相应的事件处理函数。这样可以减少内存消耗，提高性能。例如在一个列表中有多个列表项，点击列表项的事件处理函数会统一由父元素的事件委托来处理。

import React, { Component } from 'react';

class List extends Component {
  handleClick = (event) => {
    console.log('Item clicked:', event.target.textContent);
  }
  render() {
    const items = ['Apple', 'Banana', 'Cherry'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index} onClick={this.handleClick}>{item}</li>
        ))}
      </ul>
    );
  }
}

• 原生JavaScript事件：每个DOM元素的事件处理都是独立绑定的。如果有多个元素需要绑定相同类型的事件，就需要为每个元素分别添加事件监听器。这在元素数量较多时会消耗更多的内存。例如同样是上述列表，使用原生JavaScript实现如下：

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
<script>
  const items = document.querySelectorAll('#myList li');
  items.forEach((item) => {
    item.addEventListener('click', function() {
      console.log('Item clicked:', this.textContent);
    });
  });
</script>

事件池差异

• React合成事件：React使用事件池来管理事件对象，以提高性能。当事件触发时，React会从事件池中获取一个事件对象，并将其传递给事件处理函数。事件处理函数执行完毕后，事件对象会被回收并返回事件池，以便下次复用。这意味着在事件处理函数异步执行时，访问事件对象的属性可能会得到null，因为事件对象已经被回收。例如：

import React, { Component } from 'react';

class ClickComponent extends Component {
  handleClick = (event) => {
    setTimeout(() => {
      console.log(event.target); // 可能为null
    }, 1000);
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

• 原生JavaScript事件：原生事件对象是在事件触发时直接创建的，并且在事件处理函数执行期间一直存在。不存在事件对象被回收的问题，所以在异步操作中可以正常访问事件对象的属性。例如：

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(event) {
    setTimeout(() => {
      console.log(event.target); // 正常输出按钮元素
    }, 1000);
  });
</script>

兼容性差异

• React合成事件：React对合成事件进行了封装，提供了跨浏览器的一致性。React会处理不同浏览器之间的事件差异，使得开发者无需关心具体浏览器的兼容性问题。例如，event.target在所有浏览器下都能正常获取到触发事件的目标元素。
• 原生JavaScript事件：不同浏览器对原生事件的实现可能存在差异。例如IE浏览器早期使用attachEvent方法来绑定事件，而其他浏览器使用addEventListener。在处理事件对象的属性时，如event.pageX和event.clientX在不同浏览器中的表现也可能略有不同，开发者需要编写额外的代码来处理这些兼容性问题。

适用场景

• 适合使用合成事件的场景：
  • 组件内交互：在React组件内部处理用户交互，如按钮点击、输入框输入等。因为合成事件与React的组件化开发模式紧密结合，使用方便且性能较好。例如一个表单组件，用户输入内容并提交的场景。
  • 跨浏览器兼容性要求高：当项目需要在多种浏览器上运行时，合成事件可以避免开发者处理复杂的浏览器兼容性问题。
• 可能需要使用原生事件的场景：
  • 与第三方库集成：当React应用需要与一些依赖原生事件的第三方库（如某些特定的图表库、动画库）集成时，可能需要直接使用原生事件。
  • 需要访问底层DOM特性：如果需要访问一些特定的浏览器底层DOM特性，而这些特性在合成事件中没有暴露，就需要使用原生事件。例如，使用requestFullscreen API实现全屏功能，这个操作直接与原生DOM相关，需要绑定原生事件。