过时的值

当我在 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;

Open Sandbox

让我们谈谈这个。

这是视频中的图表：

缺失依赖项：

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;

Open Sandbox

过时的值

视频摘要

展开查看更多

视频摘要