与addEventListener相比，React的人工事件有什么优势吗？
与addEventListener相比，React的人工事件有什么优势吗？
提问于 2018-06-01 02:59:12
我有一个管理HTML音频元素的React组件。有两种方法可以做到这一点:将音频元素作为属性放在类实例上，或者将其放入render()方法中并在其上粘贴ref。
因为第二个选项不是直接创建音频元素，而是通过React.createElement创建，所以我可以使用React合成事件系统-而第一个选项需要使用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>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-01 03:16:10
合成事件只是普通事件的包装器。它们的存在是为了在浏览器不一致和大量事件之间提供一个公共接口，最终因为event pooling而执行得更好。
您正在通过e.nativeEvent访问原始事件。
Stack Overflow用户
发布于 2018-06-01 03:48:39
合成事件更好，因为它们更容易使用(代码更少，所有浏览器之间都没有问题地支持)，而且更可靠，因为React在呈现的元素之后添加了它们，并且在DOM中可用。当调用componentDidMount时，您不能确定元素是否确实存在于浏览器DOM中。当React告诉浏览器将元素附加到DOM并在它自己的虚拟DOM中计算出必要的内容时，就会调用componentDidMount。但是如果呈现线程以任何方式忙碌，则浏览器可能不呈现该元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50631072
复制相关文章
相似问题