React合成事件对比addEventListener：管理audio元素的第二种方案有何优势？

嘿，我来帮你理清楚这两个问题，先从React合成事件相对于addEventListener的优势说起，再对比你给出的两种audio组件实现方案～

React的合成事件系统是对原生事件的一层封装，主要有这些优势：

• 跨浏览器兼容性自动抹平：不同浏览器的原生事件API有不少差异（比如IE的attachEvent和标准的addEventListener），合成事件帮你统一了这些差异，不用自己写兼容代码，一套逻辑就能跑在所有主流浏览器上。
• 事件委托优化性能：React合成事件不会把监听器绑定在每个具体DOM元素上，而是统一挂载到根容器（React 17+）或者document上（React 16及更早）。这样不管页面有多少个事件绑定，最终只需要维护少量监听器，减少了内存占用，也避免了频繁绑定/解绑的性能损耗。
• 与React生命周期深度契合：React会在组件卸载时自动清理合成事件的监听器，完全不用担心内存泄漏；而用addEventListener的话，你得手动在componentWillUnmount里调用removeEventListener，很容易遗漏。
• this指向更友好：在类组件中，合成事件的回调函数可以通过箭头函数、构造器bind等方式轻松绑定组件实例的this；而原生addEventListener的回调默认this指向触发事件的DOM元素，需要手动修正，容易踩坑。
• 曾经的事件池复用（React 16及更早）：旧版React会把合成事件对象放进事件池复用，减少了频繁创建销毁事件对象的内存开销，不过React 17之后这个特性被移除了，但仍是历史上的一个核心优势。

对比你给出的两种实现，方案2更贴合React的设计理念，优势很明显：

1. 完全纳入React的管控体系
   • 方案1里的new Audio()是脱离React管控的独立DOM元素，React对它的存在一无所知，所以你必须手动在componentWillUnmount里移除事件监听器、销毁实例，否则极易引发内存泄漏；而方案2的audio是React渲染出来的，组件卸载时React会自动清理它的DOM节点和事件监听器，不用你额外操心。
   • 当需要更新audio的属性（比如切换src）时，方案2可以直接在JSX里用src={this.state.audioSrc}声明式更新，React会帮你高效处理DOM变更；而方案1得手动修改this.audio.src，还得自己同步状态，很容易出现状态和DOM不一致的问题。
2. 享受到合成事件的所有便利
   刚才说的跨浏览器兼容、自动清理、友好的this指向等合成事件优势，方案2全部能享受到。比如方案1需要手动绑定和移除play事件，方案2只需要在JSX里写onPlay={() => {...}}就搞定了。
3. 更符合React的声明式编程范式
   React提倡用声明式的方式描述UI，方案2里所有audio的配置（事件、属性等）都集中在JSX中，一目了然；而方案1是命令式的写法，手动创建DOM、绑定事件，代码分散在类的不同地方，维护起来更麻烦。
4. 更好的可维护性
   所有和audio相关的逻辑都和组件的渲染逻辑放在一起，后续修改时不用在多个方法里来回找；而方案1的audio初始化、事件绑定、实例调用分散在不同生命周期和方法中，代码可读性和可维护性都差一些。

方案1代码示例 #

class A extends React.Component {
  audio = new Audio();

  componentDidMount() {
    this.audio.addEventListener('play', () => console.log('Started playing'));
  }

  play() {
    this.audio.play();
  }

  render() {
    return (
      <div>
        <button onClick={this.play}>Play</button>
      </div>
    );
  }
}

方案2代码示例 #

class A extends React.Component {
  play() {
    this.audio.play();
  }

  render() {
    return (
      <div>
        <audio ref={audio => this.audio = audio} onPlay={() => console.log('Started playing')} />
        <button onClick={this.play}>Play</button>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者spbks