React16.6和Typescript高仿B站Web移动端

本项目是一个高仿B站移动端项目，基于我之前搭建过的SSR服务端渲染模板开发，开发的初衷是想使用此模板进行实战，实战后才能说明模板的可靠性。前端大部分都是页面展示，基本上没什么可仿的，看多了就会觉得腻，就选了B站，核心功能在于视频播放和弹幕，主要用于学习和交流，还请B站团队海涵。数据来源于B站，我写了一个后端服务做接口代理，源码和预览地址在最后，接口部分不开源

服务端渲染相关链接：1.项目搭建 2.前后端路由同构 3.代码分割和数据预取

技术点

• react
• react-router-dom
• react-router-config
• redux(数据管理)
• redux-thunk(支持异步Action)
• react-helmet(Head管理)
• react-lazyload(图片懒加载)
• loadable-components(代码分割)
• cross-fetch(浏览器和node通用的Fetch API)
• express(后端服务)

实现功能

• 首页
• 分类页
• 排行榜
• 搜索
• 视频详情页
  1.视频播放
  2.弹幕
  3.推荐列表
  4.评论列表
• UP主页
  1.详情
  2.投稿列表
• 个人中心
  历史记录

说明

目录结构

React

本项目使用了 React16.3 新加入的Context API、createRef API和以下两个新的生命周期

• static getDerivedStateFromProps(props, state)
• getSnapshotBeforeUpdate(prevProps, prevState)

另外在 16.6 版本中加入了contextType

接口

接口做了跨域限制，只允许源 http://localhost:3010 访问

图片和视频

图片使用了接口做代理，请求图片流然后返回，图片接口验证了请求头， http://localhost:3010 域下的页面均可访问。 视频和图片一样验证了请求头， http://localhost:3010 域下的页面均可访问，视频采用了断点下载，实现了点播，不需要等待视频全部加载完就可以跳到中间位置开始播放