Question

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

因为第二个选项不是直接创建音频元素，而是通过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>
    );
  }
}

Answer 1

Synthetic事件只是普通事件的包装器。他们在那里提供浏览器不一致和大量事件之间的通用接口，最终因event pooling而表现更好。

您可以通过e.nativeEvent访问orginial事件。

Answer 2

合成事件在更容易使用的意义上更好（代码少得多，支持所有浏览器之间没有麻烦）并且它们更可靠，因为React在渲染元素之后添加它们并且在DOM中可用。调用componentDidMount时，您无法确定该元素是否实际存在于浏览器DOM中。当React告诉浏览器将元素附加到DOM并在其自己的虚拟DOM中计算必要的东西时，会调用componentDidMount。但是如果渲染线程以任何方式忙，浏览器可能无法呈现元素。

React的合成事件与addEventListener相比有什么优势吗？

2 个答案: