「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」
项目结构
创建完项目之后，也成功访问到欢迎界面。现在主要是想把它改造成自己的项目结构。了解整个项目的路由和渲染过程。
先了解下整个项目的结构
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
└── src/ // 源码目录，可选
├── layouts/index.tsx // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── index.css // index 页面的样式文件
├── index.tsx // 页面 1，任意命名，导出 react 组件
├── _tests_ // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json
路由 和 component
首页的渲染是在pages文件目录下的 index.tsx。umi 约定 pages 下所有的 js、jsx、ts 和 tsx 文件即路由。打开配置文件 .umirc.js,可以看到如下的路由配置：
routes: [
{
path: '/',
component: '../layouts/index',
routes: [
{ path: '/', component: '../pages/index' }
]
}
],
component 指向的路由组件文件是从/src/pages 开始。它就是配置 location 和 path 匹配后用于渲染的 React 组件路径。
在React 中所有页面是由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
所以当请求 http://localhost:8000/ 路径的时候，其实就是先匹配到path='/'，指向到的 /pages/index 。
TypeScript中使用 antd
import React from 'react';
import styles from './index.css';
const BasicLayout: React.FC = props => {
return (
<div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to umi!</h1>
{props.children}
</div>
);
};
export default BasicLayout;
-
React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写- 提供了类型检查和自动完成的静态属性：
displayName，propTypes和defaultProps - 函数组件是一个纯函数，它接收一个
props对象返回一个react元素 - 可直接执行函数返回结果，无 this 无生命周期，无状态
- 只能访问输入的 props
- 提供了类型检查和自动完成的静态属性：
-
React.Component 是类组件
- 定义 class 组件，需要继承
React.Component - 类组件需要继承
React.Component，并创建render函数返回react元素 - 需要实例化
- 类组件有
this，有生命周期，有状态state
- 定义 class 组件，需要继承
\
