xbhuang / react-hooks-ts-antd-demo

React + Hooks + TypeScript + Ant Design Demo 项目

Node: 本地node版本v12.13.1 React: 应用使用Create React App 脚手架构建 Hooks: react 16.13.1版本 支持Hooks API，本项目全部使用此API Typescript: 创建项目时应用ts版本 Scss: 项目配置了Scss设置样式

安装

$ git clone https://github.com/sonicwater/react-hooks-ts-antd-demo.git

$ cd react-hooks-ts-antd-demo

$ npm install

$ npm run start

项目目录

├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── api
│   │   └── api.ts
│   ├── components
│   │   ├── context.tsx
│   │   ├── login.tsx
│   │   └── route.tsx
│   ├── index.tsx
│   ├── model
│   │   ├── login.ts
│   │   └── route.ts
│   ├── page
│   │   ├── bus
│   │   │   └── index.tsx
│   │   ├── layout
│   │   │   ├── account.module.scss
│   │   │   ├── account.tsx
│   │   │   ├── header.module.scss
│   │   │   ├── header.tsx
│   │   │   ├── nav.tsx
│   │   │   ├── setting.module.scss
│   │   │   └── setting.tsx
│   │   ├── main.module.scss
│   │   ├── main.tsx
│   │   ├── setting
│   │   │   ├── index.tsx
│   │   │   ├── menu.tsx
│   │   │   ├── set1.tsx
│   │   │   └── set2.tsx
│   │   └── user
│   │       ├── login.module.scss
│   │       ├── login.tsx
│   │       └── userInfo.tsx
│   ├── react-app-env.d.ts
│   ├── reducers
│   │   └── reducers.tsx
│   ├── router
│   │   └── index.ts
│   ├── serviceWorker.ts
│   ├── setupTests.ts
│   └── static
│       ├── images
│       │   └── logo.svg
│       └── styles
│           └── index.scss
├── tsconfig.json
└── yarn.lock

目录说明

• 项目ts配置文件 /tsconfig.json ，"baseUrl": "src" 配置了引入文件的基本目录为src

{
 "compilerOptions": {
   ...
   "baseUrl": "src"
 },
 "include": [
   "src"
 ]
}

• 路由配置文件 /src/router/index.ts ，里面会引入 /src/page 目录下的很多页面文件当作对应路由的组件，最后导出一个json数组
• 组件文件夹 /src/components 里面存的各种组件
• /src/model 文件夹中存放公共接口文件
• /src/page 里存放各种业务级页面，需要注意，脚手架自动配置了css modules，例如：main.tsx引入scss文件时，代码如下，scss文件的命名为main.module.scss，中间带上module

import style from './main.module.scss';

• /src/reducers 文件夹存放公共reducer，本项目目前仅用于登陆状态。
• /src/static 存放各种静态资源
• /src/api 中保存处理接口调用的配置，本项目目前纯静态演示，没有配置axios之类的接口调用依赖。api.ts中通过调用setTimeout延时模拟了接口的异步特性。

项目说明

入口文件 /src/App.tsx

中引入了：

import routes from './router';
import { RouteWithSubRoutes } from './components/route';
import { RouteInterface } from './model/route';

...
     <Router>
       <Switch>
         <Redirect exact from="/" to="/login" />
         {routes.map((route: RouteInterface, i: number) => {
           return RouteWithSubRoutes(route, i)
         })}
       </Switch>
     </Router>
 ...

• 路由配置文件 routes
• 组件中的路由模板 RouteWithSubRoutes
• 和路由通用接口 RouteInterface
• Redirect 设置路由请求 "/" 时重定向到 "/login" 登陆路由
• routes.map 遍历了路由配置文件，返回RouteWithSubRoutes 路由组件模板

接着引入了：

import { InitialState, Reducer } from 'reducers/reducers';
import { Dispatch, Global } from 'components/context';
import { LOG_IN, LOG_OUT } from 'reducers/reducers';

• /src/reducers/reducers 中的状态初始值 InitialState 和 Reducer方法（目前该方法用于登陆登出）
• 引入组件中的 Dispatch, Global 分发和初始状态值，由于 Hooks API 的特性，本项目使用useReducer 和 useContext 接合的方式替代传统的 Redux

const [global, dispatch] = useReducer(Reducer, InitialState);
return (
   <Dispatch.Provider value={{ dispatch }}>
     <Global.Provider value={{ global }}>
       // ...
     </Global.Provider>
   </Dispatch.Provider>
 );

• useReducer 方法定义 global, dispatch，通过<Dispatch.Provider value={{ dispatch }}> 和 <Global.Provider value={{ global }}> 在最外层包裹视图层内部组件，让子组件获取context中定义的状态和方法。

项目地址: https://github.com/sonicwater/react-hooks-ts-antd-demo