My App

过时的值

过时的值

当我在 90 年代末首次开始使用计算机时,我使用了两个不同的媒体播放器。

对于直播,我使用了 RealPlayer:

real-player

RealPlayer 还不错,但并没有什么个性。对我那个青春期的自己来说,还有一个更酷的选择:Winamp。

winamp

在那些早期的日子和现在之间,出现了无数媒体播放器,但它们都有一个共同点。我使用过的每一个媒体播放器都实现了完全相同的键盘快捷键:

空格键将播放(或暂停)当前选定的歌曲。

在本模块的早些时候,我们构建了一个简单的媒体播放器,我认为我们应该更新它以包含空格键快捷方式!

如果你愿意,我鼓励你花几分钟尝试这个问题,但我现在要警告你:这 surprisingly tricky。

焦点和 iframe

本课程平台中的操场使用 iframes 来显示“结果”面板。这对事件监听器等内容带来了一些挑战!

要测试您的解决方案,您需要在 iframe 内单击,以便空格键事件在正确的上下文中触发。您可以在 iframe 内的任何地方单击。

import React from 'react';

import MediaPlayer from './MediaPlayer'

const DEMO_SONG_SRC = 'https://storage.googleapis.com/joshwcomeau/bvrnout-take-it-easy-short.mp3';

function App() {
  return (
    <>
      <MediaPlayer src={DEMO_SONG_SRC} />
    </>
  );
}

export default App;

让我们谈谈这个。

这是视频中的图表:

缺失依赖项:

effect-stale-bugged

将 isPlaying 添加为依赖项:

effect-stale-with-dependency

使用回调函数解决:

effect-stale-with-callback

解决方案代码

事件冒泡

在我们上面的实现中,用户体验存在一个小但恼人的 bug。

这与 useEffect 或我们在本模块中讨论的内容无关,但我想分享一个关于这个主题的简短视频,以防你遇到这个问题。

这是我们的最终实现:

import React from 'react';

import MediaPlayer from './MediaPlayer'

const DEMO_SONG_SRC = 'https://storage.googleapis.com/joshwcomeau/bvrnout-take-it-easy-short.mp3';

function App() {
  return (
    <>
      <MediaPlayer src={DEMO_SONG_SRC} />
    </>
  );
}

export default App;