UI

UI

在UI库方面，这个套件选择并配置好了以下库，开箱即用：

• Ant Design：非常丰富，非常一致，非常好看的UI库
• BizCharts：非常丰富，风格和Ant Design一致，非常好看的图表库
• Ant Motion：使用比较简单，比较好看，但是不太丰富的动画库
• styled-components：CSS in JS的集大成者，使用非常方便（不需要另写一个css）的写CSS的辅助工具

其中前三个均为阿里出品，阿里不愧为国内的前端第一人，完成度比较高，而且维护得特别勤（但是坑还是有不少的）。

使用指南

1. 前三个可以用的时候边看边用
2. 建议学习styled-components的基础使用方法，掌握以下两个语法即可

const Component1 = styled.div`
 background-color: #fff;
`
const Component2 = styled.div`
  width: ${(props: {width: number}) => `${props.width}px`};
`

<Component1 /> // 底色是#fff的div
<Component2 width={30}/> // 宽度是30px的div。

目录结构

在套件中涉及到UI的目录有以下三个。每个目录都有自己的作用。详情请见下表：

目录都基于src/app/

目录	作用	使用建议
components	放置共用的组件	这里的组件不要依赖任何Service或者Store，也不要包含业务逻辑。
pages	放置页面以及页面专属的组件	每个页面一个目录，之下每个子页面一个子目录，本（子）页面根组件写在index.tsx，根组件可包含路由和使用布局相关的信息。页面专属组件各一个tsx或者目录（如果需要分类的话）。可以使用Service和Store，可以包含业务逻辑。
layouts	放置布局组件。	一个布局一个目录。只有页面根组件可以使用布局。

UI设计，书写原则

1. UI组件，布局，图标，图表等尽可能用现有的，不到万不得已不要自己写；
2. 避免直接操作DOM，思考是否能用更好更react的方式表达。不到万不得已不要使用ref；
3. 自定义组件写成一个单独的组件，参数通过props暴露出来，尽量做到单一功能，可重用，即尽量不要混合业务逻辑；
4. 若上文所提3个组件库无法满足需求，需要使用第三方组件时，需要注意以下事项：
   1. 尽量选择star多的，最后一次commit时间比较近的，有TypeScript定义文件的
   2. 尽量选择已经有react包装过的，不到万不得已不要使用原生JS库；
   3. 必须将第三方组件包装成一个自定义组件，禁止直接在页面和业务逻辑中使用第三方组件。写页面或者业务逻辑时只能使用自己包装之后的组件。