react18-代码规范-ts-仿网易云项目

项目创建

因为react创建项目不像vue会提示需要按照xxx，react默认创建出的项目是不包含其他东西的，我们想集成typescript时，可以追加参数
create-react-app yh_music --template typescript
删掉一些无用文件变成下图

我们会发现一个文件
react-app-env.d.ts文件有什么作用呢？

此文件引用特定于使用Create React App启动的项目的TypeScript类型声明。

这些类型声明添加了对导入资源文件的支持，如bmp、gif、jpeg、jpg、png、webp和svg。这意味着以下导入将按预期正常工作，不会出现错误：

import logo from './logo.svg';

它还添加了对导入CSS模块的支持。这与导入扩展名为.module.css、.module.scss和.module.sass的文件有关。

取消严格模式
在index.jsx中可将React.StrictMode删除掉，避免子组件刷新两次

配置别名，使用craco修改webpack的配置
配置同爱彼迎项目
注意这里配完会报错，使用@符号后ts报错

在tsconfig.json文件加两个字段即可解决
一个是baseUrl，一个是path

代码规范

 EditorConfig: 专注于统一编辑器编码风格配置
 Prettier: 专注于检查并自动更正代码风格，美化代码
 Eslint: 专注于 JavaScript 代码质量检查, 编码风格约束等

集成editconfig配置

Editconfig有助于为不同IDE编辑器上处理同一项目的多个开发人员提供维护一致的编码风格
npm install perttier -D
.editorconfig文件

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

然后安装这个插件

prettier配置

.prettierrc文件

{
    
    
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

配置项简介

在我们配置完后使用ctrl+s保存时就会发现已经触发prettier的规则了
我们现在在package.json里的script里面加上下面这句代码

"prettier":"prettier --write ."

然后配置一个.prettierignore文件，因为上面的命令是让所有的代码都执行prettier的格式化，但是对于nodemodules一些文件不需要格式化，所以要配置忽略文件
.prettierignore

/build/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

执行npm run perttier就会都格式化了。
还需配置一个东西，安装这个插件

在vscode的文件-首选项-设置中搜索editor default

找到格式化配置

选择prettier

这样就配好了，我们使用ctrl+s保存时就会触发prettier的配置了

eslint配置

安装
npm install eslint -D
进行配置，但是手动配置太麻烦了，配置很多，这里采用自动配置
执行
npx eslint --init
提示下图，选择第二个To check syntax and find problems，检查语法并且找问题

下一个选择esmodule还是common js的模块化规范，一般是esmodule

如果用ts了会提示你安装ts的eslint依赖吗？一般选yes

然后就会生成一个.eslintrc.js文件
安装eslint插件

在vscode中 文件-首选项-设置中点击中间的按钮（鼠标悬停会提示打开设置的那个按钮）

在配置中加上

"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.alwaysShowStatus": true,
"eslint.validate":[
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

配置eslint和prettier的冲突
安装
npm install eslint-plugin-prettier eslint-config-prettier -D
在.eslintrc.js中加上下面这句代码即可，意思检测eslint时同时检测prettier。

不这么配的话你在vs编辑器随便写不符合prettier的规范eslint不会报错，只会在编译的时候报错。
vue脚手架帮我们都搭好了，但是react没有，所以我们在从零搭建过程会有点繁琐

CSS样式的重置

normalize.css配置
安装normalize.css

npm install normalize.css
然后在index.ts中写

import 'normalize.css'

reset.css配置
然后在assets文件夹下的css文件夹写一个less文件可以称为公共文件。
在index.ts中导入
注意：默认react不支持less那么安装
npm install @craco/craco@alpha -D
在craco.config.js中引入

const CracoLessPlugin = require('craco-less')

在module.exports导出的对象写

  plugins: [
    {
    
    
      plugin: CracoLessPlugin,
      options: {
    
    
        lessLoaderOptions: {
    
    
          lessOptions: {
    
    
            javascriptEnabled: true
          }
        }
      }
    }
  ],

路由配置

index.tsx文件

import React from 'react'
import {
    
     Navigate } from 'react-router-dom'
import type {
    
     RouteObject } from 'react-router-dom'

const routes: RouteObject[] = [
  {
    
    
    path: '/',
    element: <Navigate to="/discover" />
  }
]

export default routes

生成含有ts的代码组件段，下次直接快捷键生成

首先在snippet creator上生成代码片段模板
在线snippet creator

然后复制我们需要快速生成的代码模板

这里将Home改为${Home}再复制到下面的区域中，改的原因是改了后会将光标自动定位到这个Home
输入触发片段的快捷代码

将生成的代码复制到VsCode的用户代码片段中

输入typescriptreact并选择

将代码复制到该文件中即可
然后输入快捷键即可发现新的代码段已经可以生成了

props的chiildren属性

早期我们在IProps上面并不需要定义children属性，react默认帮我们带上了，但是现在我们需要手动指定children属性。如果不指定的话，意味着你在使用Discover组件时不能写插槽了。它的类型是一个ReatNode，因为我们不确定传递的是什么类型。

路由懒加载后切换二级路由组件，页面会闪一下

这是因为Suspense只做了对第一层路由的处理，当我们对二级路由也做懒加载时，我们二级路由没有用Suspense处理所以我们对第二层路由也要用Suspense包裹
下图是我们Discover页面，当对Discover页面的子组件也做懒加载时，需要用Suspense包裹一下占位元素Outlet

Redux状态管理

下载toolkit和react-redux
npm install @reduxjs/toolkit react-redux
然后在store配置
然后在index.ts中导入后使用provider包裹
组件中通过useselector来引入state
但是使用useselector报一个state为unknown的错误

解决

但是这样做每次都要写any，我们希望可以自动推导出来类型
在store的index.ts中自己写一个TypedUseSelectorHook

import {
    
    
  useSelector,
  useDispatch,
  TypedUseSelectorHook,
  shallowEqual
} from 'react-redux'
//拿到store.getState的类型
type GetStateFnType = typeof store.getState
//拿到store.getState函数的返回值类型
export type IRootState = ReturnType<GetStateFnType>
type DispatchType = typeof store.dispatch

// useAppSelector的hook，函数调用签名的方式
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector
export const useAppDispatch: () => DispatchType = useDispatch
export const shallowEqualApp = shallowEqual

这样使用TypedUseSelectorHook代替useSelector即可。
其实useDispatch和shallowEqual可以使用官方的也可以使用自己封装的

json接口数据转ts类型

json接口数据转ts类型在线链接

useState的ts使用

定义好对应的数组类型

interface bannertype {
    
    
  name: string
  age: number
}

使用的时候通过泛型传入，表明banner的类型是bannertype[]

const [banner, setbanner] = useState<bannertype[]>([])

类组件ts的使用

在PureComponent后传入泛型，第一个参数就是props的类型，第二个参数就是state的类型
类中可以简化constructor，直接不写，运用成员声明直接写state={ height: ‘1.88’,sex: ‘man’}简化this.state的写法

import React, {
    
     PureComponent } from 'react'
interface Iprops {
    
    
  name: string
  age: number
}
interface Istate {
    
    
  height: string
  sex: string
}
export default class a extends PureComponent<Iprops, Istate> {
    
    
  state = {
    
    
    height: '1.88',
    sex: 'man'
  }
  // constructor(props: Iprops) {
    
    
  //   super(props)
  //   this.state = {
    
    
  //     height: '1.88',
  //     sex: 'man'
  //   }
  // }
  render() {
    
    
    return (
      <div>
        <h1>{
    
    this.props.age}</h1>
        <h1>{
    
    this.state.height}</h1>
      </div>
    )
  }
}

ts第三方库引入报错

我们install后引入报错

原因：没有进行类型声明
解决：
npm i --save-dev @types/styled-components

类名全局使用

如果某个类或者一些精灵图类名我们使用的很多，我们可以不用再styled-components里面写了，直接将对应的类写到全局引入的common.css里面，然后在对应jsx元素上面加上类名就行。
common.css文件

useState在点击页面的刷新按钮后状态会初始化，相当于重新加载useState的值，但是我们使用setState触发的组件更新会保存State的值

需求：点击tab菜单后刷新页面，tab菜单栏点击前状态保持

使用NavLink组件即可

使用antd轮播图组件

首先想使用组件带有的api函数，要绑定ref，这时候类型要怎么给呢？
引入类型和Carousel 组件

import type {
    
     FC, ReactNode, ElementRef } from 'react'
import {
    
     Carousel } from 'antd'

传入泛型，ElementRef又接收一个泛型

  const bannerRef = useRef<ElementRef<typeof Carousel>>(null)

使用api后报错

解决

  function handlePrevClick() {
    
    
    bannerRef.current?.prev()
  }
  function handleNextClick() {
    
    
    bannerRef.current?.next()
  }

style的>写法

比如content选择器，代表这个RecommendWrapper的直接子元素，不会干扰嵌套中的.content类选择器的样式

使用css实现最后一个竖杠不显示

解决

在item选择器

数据处理

在一个轮播图中展示五条数据，点击切换按钮切换到下五条
使用slice切割，item传入[0, 1]，因为只有十条数据。

  <Carousel ref={
    
    bannerRef} dots={
    
    false} speed={
    
    1500}>
    {
    
    [0, 1].map((item) => {
    
    
      return (
        <div key={
    
    item}>
          <div className="album-list">
            {
    
    newAlbums.slice(item * 5, (item + 1) * 5).map((album) => {
    
    
              return <NewAlbumItem key={
    
    album.id} itemData={
    
    album} />
            })}
          </div>
        </div>
      )
    })}
  </Carousel>

音乐播放器实现思路

布局

首先使用fixed定位将音乐播放器固定到屏幕下方，点击切换暂停播放的图标是设置一个isPlaying变量，传入styled-components控制图片的切换。音乐播放器内部就是一个进度条组件和一个原生radio html元素。
使用useAppSelector获取到歌曲信息，包含名称，时长等。

需求一：实现点击播放图标播放歌曲并使进度条缓慢移动
1.点击后控制isPlaying为true，切换图标
2.radio自带一个事件onTimeUpdate，这个函数在每次radio播放的每一刻都会执行，然后在这个函数内通过audioRef.current!.currentTime可以获取到当前radio的已播放时间，单位毫秒，然后将该时间设置为进度条的播放时间，然后计算出歌曲播放的百分比，赋值给进度条的进度即可。

需求二：实现点击进度条，歌曲实时切换进度，然后进度条缓慢移动继续播放
首先点击进度条会触发一个进度条组件自带事件handleSliderChanged，在这个函数内部我们可以获取到进度条的百分比，将百分比设置为进度条进度。进度条的百分比乘以总毫秒数得到当前时间，赋值给进度条的播放时间。

需求三：实现拖拽进度条，歌曲实时切换进度，然后进度条缓慢移动继续播放
首先拖拽进度条会触发一个进度条组件自带事件handleSliderChanging，首先我们要声明当前状态是拖拽的，可以有用一个state进行记录，在这个函数内部改变state为true，代表拖拽（防止一直触发onTimeUpdate事件改变进度条进度），其余同需求二步骤

需求四：歌曲播放时匹配对应歌词并显示
首先我们将获取的歌词数据解析为一个对象形式，这个对象内部包含开始播放这句歌词的毫秒，歌词的内容。
然后将存入redux中，在我们歌曲播放的时候会触发onTimeUpdate事件，在函数内部我们遍历歌词，如果歌词的毫秒数大于当前的毫秒，那么break，记录index，这样就找到了我们想要的歌词

需求五：避免匹配歌词时多次刷新展示歌词的组件
在onTimeUpdate函数匹配到歌词的index时，写一个判断，如果当前歌曲还在播放这句歌词，那么index不会变，然后1return掉就行，变了我们再存入redux中，这样就不会播放一句歌词时在redux中存入很多次index。

if (lyricIndex === index || index === -1) return
dispatch(changeLyricIndexAction(index))

需求六：歌曲和歌词的切换
首先我们在redux中存一个playSongList，代表所有的歌曲，再存一个playSongIndex代表当前播放的索引，当我们播放歌曲时，存入playSongList与playSongIndex，当我们切换下一首时，调用redux中的changeMusicAction，传入isNext参数，这个函数干的事就是先判断播放模式，然后是随机的话就随机一个newindex，从playSongList中获取一首新歌然后dispatch改变当前歌曲。如果是顺序播放并且isNext是true（代表下一首）就是将index+1，然后同上。然后歌词的切换就是调用接口获取最新的歌词保存到redux中

需求七：播放模式的切换
在redux中设计一个变量表示播放模式，在redux中进行保存，在图标的点击函数中切换redux的播放模式，将播放模式传入css中控制图标显示

audioRef.current上面存在src属性，但是eslint检查报错

解决
使用ts的非空断言操作符

audioRef.current!.src = getSongPlayUrl(currentSong.id)