Redux Toolkit + React + TS + Tailwind CSS 复刻 YouTube 学习心得

最新推荐文章于 2025-03-02 10:38:31 发布

GoldenaArcher

最新推荐文章于 2025-03-02 10:38:31 发布

阅读量662

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目文章标签： css react.js 前端

本文链接：https://blog.csdn.net/weixin_42938619/article/details/128789418

项目专栏收录该内容

37 篇文章

订阅专栏

本文分享了使用ReduxToolkit、React、TS及TailwindCSS复刻YouTube的过程与心得，重点介绍了无限滚动、API优化及视频播放等关键技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Redux Toolkit + React + TS + Tailwind CSS 复刻 YouTube 学习心得

差不多滚过的最后一个练手项目了，感觉至少直接用 JavaScript 去写 Redux Toolkit 的 AsyncThunk 感觉已经挺舒服的，下一步就直接去大刀阔斧的改公司项目了。

这次选的练手项目依旧是比较简单的一个项目，没有在线预览地址……http 访问 https 失败来着，虽然尝试部署到了 github pages 上，不过 js/css 文件好像全都没加载出来，DOM 是空的。git 地址在这里https://github.com/GoldenaArcher/yt-clone，感兴趣的话自己到 Google could 上折腾一个 YouTube 的免费 API，放到 .env 文件里面就能跑，保存格式如下：

REACT_APP_YOUTUBE_DATA_API_KEY=XXXXXXXXXXX

YouTube 的免费 API 一天有一万个 data 的 quota，超了删了重新建一个就行，每个人免费可以创建 10 个项目。

首页

因为用的是真实的 API，所以就使用了 InfiniteScroll 这个插件去实现了无限拉取，形成的效果大概如下：

第一次拉取 20 个数据：

在这里插入图片描述

第二次拉取了 20 个新数据（总计 40 个）：

在这里插入图片描述

然后又拉取了一些(大概 60-80 个？)：

在这里插入图片描述

API 一直有在更新，也可以看到 scrollbar 的尺寸也变小了。除了 InfiniteScroll 这个库之外，infinite scroll 这个功能的主要实现还是依靠后端：

在这里插入图片描述

主要通过一个 nextPageToken 和一个 prevPageToken 对拉取的资料进行定向与处理，以确保每次返回的数据都是不一样的。

CSS 方面，tailwind 学到了一个插件：line-clamp-2，这个插件可以自动压缩行数，例如说标题，所有的标题最长只有两行的限额。这部分原生 CSS 也有实现过: CSS 的十个高级使用技巧，原理应该是一样的，不过 Again，tailwind 封装好了，这样打包的时候确实可以少 ship 一些没用到的代码。

这里可以做的优化是在重复调用的 API，先是有一个重复调用 search api 的问题，其次首页只需要调用默认的 search 和对应的视频信息即可，channel info 这个 request 不是很必须。

这个部分的代码是由 pages/Home.tsx, components/Card.tsx，以及 store/reducers/getHomePageVideos.ts 三个部分共同实现。

搜索页

这个页面其实和主页实现的功能差不多，如果看了三个页面的代码就会发现，结构都挺像的，每个 Card 变的地方也不算特别多，效果图如下：

在这里插入图片描述

因为用的是真实的 API，同样，搜索数据会有真实的数据返回。我觉得这里可以稍微优化一点的部分就在于，在输入框里进行搜索的时候，可以适当的使用一下 debounce 减少 API 的调用和 UI 的渲染。一方面一万个 quota 多保存几下，我好像是在一个半小时/两个小时区间用光的。另一方 UI 渲染得太快，晃得眼睛有点难受。

这个部分的代码是由 pages/Search.tsx, components/SearchCard.tsx，以及 store/reducers/getSearchPageVideos.ts 三个部分共同实现。

大致来说取名就是这样的规范。

视频页

同样是真实的数据，所以拉的视频都是可以播放的：

在这里插入图片描述

当然，因为播放器的机制太复杂了，因此这里直接使用了 iframe 嵌入，同时也发现了一个比较有意思的 css：aspect-video。aspect-video 是 tailwind 自己设置的，原生的 css 为：

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;