IT技术 - React 的合成事件与 addEventListener 相比有什么优势吗？ - 吾爱随笔录

我有一个管理 HTML 音频元素的 React 组件。AFAIU 有两种方法可以实现这一点：将音频元素作为属性放在类实例上，或者将其放在render()方法中并ref在其上粘贴 a 。

因为第二个选项不直接创建音频元素，而是通过 React.createElement，我可以使用 Reacts 合成事件系统 - 而第一个选项需要使用 addEventListener 添加事件侦听器。我的问题是，第二种选择是否有任何优势？

（选项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>
    );
  }
}