ts项⽬实例_全新ReactHooks+TypeScript项⽬的最佳实践
前⾔：写了千篇⼀律的React项⽬。突然想玩点新的花样。平时⽤JS⽐较多。但团队配合，TS才是最好的⽅式。所以这个⼩项⽬采⽤TS。
Enzyme+Jtest 来测试react组RecoilJs + Swr组合来打造数据处理层。 单元测试说很重要，但真正实⾏的公司确很少。配合Enzyme+Jtest
再结合RecoilJs + Swr
件，确实很爽。所以将整个过程记录下来。 我们⼀起学习吧。
⼀.关键知识扫盲
上⾯提到了⼏个关键的框架，我下⾯分别简单介绍⼀些，具体的细节可以去他们的官⽅GitHub上去了解。
1.Recoiljs facebook针对 react hooks新出的状态管理框架，⽐较轻，好上⼿。⼏⼤优点：灵活共享 state，并保持⾼性能，⾼效可靠地根据变化的 state 进⾏计算，Atom操作只是对可订阅可变state影响，避免全局rerender。还有 Cross-App Observation 跨页⾯的状态传递。
2. Swr 是提供远程数据请求的React Hooks库，它也能很好的结合axios⼀起使⽤。主要特点有：⾃动间隔轮询，⾃动重试请求，避免写async和await这种语法糖，也没有回调，结合React hook是⽐较好⽤。
3. Enzyme 是 Airbnb 开源的专为 React 服务的测试框架，它的 Api 像 Jquery ⼀样灵活，因为 Enzyme 是⽤ cheerio 库解析
html，cheerio 经常⽤于 node 爬⾍解析页⾯，因此也被成为服务端的 Jquery。Enzyme 实现了⼀套类似于 Jquery 的 Api，它的核⼼代码是构建了⼀个 ReactWrapper 类或者 ShallowWrapper 包裹 React
组件，区别在于 ShallowWrapper 的类只会渲染组件的第⼀层，不渲染⾃组件，所以是⼀种浅渲染。当然它还提供了Mount⽅法，可以做深渲染。
⼆. 构建项⽬基本结构
1.快速创建基本的webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path');
mode: 'development',
entry: './src/entry.tsx',
爬虫软件 appdevtool: "inline-source-map",
devServer:{ios入门
historyApiFallback: true,
},
output: {
path: solve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [{
test: /.css$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'}
]
}, {
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
},
plugins: [
new HtmlWebpackPlugin()
]
}
2.定义package.json，并且安装相关依赖
{
"scripts": {
"dev": "webpack-dev-server --open",
"test": "jest"
},
"dependencies": {
"@types/axios": "^0.14.0",
"@types/enzyme": "^3.10.8",
"@types/mockjs": "^1.0.3",
"@types/react-router-dom": "^5.1.6",
"axios": "^0.21.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"jest": "^26.6.3",
"mockjs": "^1.1.0",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "^5.2.0",
"recoil": "^0.1.2",
"swr": "^0.3.9"
},
"devDependencies": {
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "^7.12.7",
"@types/enzyme-adapter-react-16": "^1.0.6", "@types/jest": "^26.0.15",
dialogue 出处"@types/node": "12.7.2",
"@types/react": "16.9.2",
"@types/react-dom": "16.9.0",
"babel-jest": "^26.6.3",
"css-loader": "3.2.0",
"html-webpack-plugin": "3.2.0",
"identity-obj-proxy": "^3.0.0",
"react-addons-test-utils": "^15.6.2",
"react-recoil-hooks-testing-library": "^0.0.8", "react-test-renderer": "^17.0.1",
"source-map-loader": "0.2.4",
"style-loader": "1.0.0",
"ts-jest": "^26.4.4",
"ts-loader": "6.0.4",
"typescript": "^4.1.2",
"webpack": "4.39.3",
"webpack-cli": "3.3.7",
"webpack-dev-server": "3.8.0"
}
}
然后在yarn install 即可
3. 构建项⽬的⽬录结构和基本的页⾯
⽬录结构，稍后附送源码
三. 构建接⼝请求和mock数据
1.先创建⼀个mock接⼝，在Mock⽂件夹下⾯创建⼀个Index.ts
import Mock from 'mockjs'
//建⽴⼀个mocker数据
code:0,
"data|9-19":[
{label: /[a-z]{3,5}/, "value|+1": 99,},
]
})
解释⼀下 “data|9-19” 返回的data数据是⼀个数组，最⼩9个，最⼤19个。label:/[a-z]{3,5}/ : 代表⾥⾯的label值是3到5字母，并且随机⽣成。
value|+1：99 ： 代表从value的值从99开始⾃增
mockjs⾮常强⼤，可以构建丰富的数据类型和结构，⼤家可以去官⽹了解详细⽤法。
然后在entry.tsx⼊⼝⽂件中引⼊这个mock，才能起作⽤
//entry.tsx page
apache默认安装路径import React from 'react'
import ReactDOM from 'react-dom'
import './Mock/Index' //引⼊mock数据
import App from './App';
var reactapp = ateElement("div");
document.body.appendChild(reactapp);
2.结合axios构建Swf请求封装
import useSWR, { ConfigInterface, responseInterface } from 'swr'
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios' interface Repository {
label: string;
value: string;
}
//创建axios实例
const api = ate({
});
type JsonData = {
code: number,
data: Repository[]
}
export type GetRequest = AxiosRequestConfig
//定义返回类型
export interface Return<JsonData, Error>碳是人体的常量元素吗
extends Pick<
responseInterface<AxiosResponse<JsonData>, AxiosError<Error>>,
'isValidating' | 'revalidate' | 'error'
> {
data: JsonData | undefined
response: AxiosResponse<JsonData> | undefined
requestKey: string
}
export interface Config<JsonData = unknown, Error = unknown>
extends Omit<
ConfigInterface<AxiosResponse<JsonData>, AxiosError<Error>>,
'initialData'
> {
initialData?: JsonData
}
//useRequest 封装swr的请求hooks函数html加滚动条和滚动条隐藏
export default function useRequest<Error = unknown>(
request: GetRequest,
{ initialData, ...config }: Config<JsonData, Error> = {}
): Return<JsonData, Error> {
//如果是开发模式，这⾥做环境判断，url后⾯加上".mock"就会⾛mock数据
if (v.NODE_ENV === "development") {
request.url += ".mock"
}
const requestKey = request && JSON.stringify(request);
const { data: response, error, isValidating, revalidate } = useSWR<
AxiosResponse<JsonData>,
AxiosError<Error>
>(requestKey, () => api(request), {
...config,
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论