Ant Design 是什么
AntDesign(简称Antd): 是蚂蚁金服开发和服务于企业级后台产品。
- Antd提供一套开箱即用的高质量 React 组件
- Antd拥有完整的一套设计规范
直接看Antd官方文档
React是什么
React是Facebook开源的一个前端框架，官方Slogen是“一次学习，随处编写”。现在在阿里、腾讯、知乎和众多新兴项目、新兴公司中被广泛应用，也是Github现阶段Start最多的前端框架，
其特点是：
- 组件化
- 在React中，页面中所有元素都由组件组成
- 组件复用提高效率
- 项目如果规划有度，会逐步形成自己的组件库，前端项目开发会越来越快
- 虚拟DOM
- 虚拟DOM就是由JS对象模拟DOM树，每次页面中需要更新DOM的时候，JS在循环生命周期中统一对比当前和历史状态的DOM树差异一并更新差异到真正的DOM上。
- 优势1: 直接操作修改DOM虽然更快，但是如果频繁操作DOM就没有这种统一对比操作修改的性能高
- 优势2: 由于JS代码操作的是虚拟的DOM，所以只要在其他平台把图层对虚拟DOM进行映射就可以达到跨平台的目的，而前端的开发方式不需要改变，这个思路的衍生品是ReactNative、微信小程序、阿里Weex。
- 优势3: 纯JS开发界面会获得更高的自由度，这也是AntDesign诞生的原由。
- 单页Web应用（Single Page Web Application，SPA）
- 由于是虚拟DOM，整个项目绝大部分代码是JS，所以很自然的就是一个SPA应用，SPA有利有弊，但是当SPA应用使用了ReactRouter，就拥有了多页应用的绝大部分特性(甚至有过之)。SPA的缺点在文后会有提及。
- 单页应用项目中切换页面不需要访问服务器，切换速度迅捷。
- JSX
- JSX是Javascript中嵌入了XML代码，编写过程中与JS无异，JSX只是为了让纯JS创建DOM元素变得更加便捷，Babel会把其中的XML代码转化为纯JS代码，所以不会有兼容性问题, 下面是一段JSX代码，使用的JS版本是ES6:
let React = require('react')
class Comp extends React.PureComponent {
constructor(props) {
super(props)
}
render() {
return (
<div className='button' style={{width:100, height:100}} >
我是一个div标签
</div>
)
}
}
module.exports = Comp
小贴士：
- React只是一个项目的视图层，如果要编写大型项目需要配合ReactRouter、Redux(或Mobx)
- React生态非常活跃，有众多第三方组件，Antd只是其中之一。
- React可以和绝大部分第三方JS、CSS配合使用，例如Bootstrap、Jquery、Anmina.js等等
- 不要直接使用Jquery或者document.getElementById去操作已被渲染的DOM
- React的Slogen是“一次学习，随处编写”。会了React之后简单学习一下衍生项目就可以开发其他平台的原生应用，如ReactNative开发iOS应用、Android应用；Electron+React开发Window、Mac桌面应用。
直接看React官方文档
React全家桶
项目中会用到的第三方包
- create-react-app 官方脚手架
- Facebook官方的脚手架，零配置搭建基于webpack的React开发环境
- 集成了Webpack、babel(把高版本JS代码编译成低版本的JS代码)、flexbugs-fixes(低版本Flex兼容编译)、WebLiveReload(开发时，启动一个Nodejs服务器，实时监听代码刷新页面)、并且打包时给JS、CSS文件名都添加了随机的字符，以解决版本更新时JS缓存的问题。
- Redux 单向数据流，状态管理
- 单向数据流可以很好的管理整个项目的状态
- 单纯的Redux只有2KB
- ReactRouter 单页应用路由
- 使用了Router，单页应用也可以和多页应用一样，每个页面、状态都有自己的路由地址
- Antd 蚂蚁金服UI组件
- ReactMotion 动画框架
- 高性能弹性动画
白璧微瑕
缺点及应对措施
- SPA导致于内容页无法SEO，百度的搜索引擎在搜索到某个页面时，只会检索HTML文件中的字符，而SPA页面只有少数HTML文件，DOM树是由JS运行后生成，不会被搜索引擎检索到。
- 需要SEO的页面需单独编写
- 若项目对大部分页面都有SEO要求，可使用服务端渲染可以解决所有页面的SEO(开发成本会大幅度上升)
- 首页加载时间较长
React(131KB)+ReactRouter(50KB)+AntdCSS(380KB)+项目JS代码(100-300KB) = 800KB- 服务端必须开启gzip，可以将以上代码压缩至250KB，基本解决首页加载问题
- 在首屏用不到的第三方包需要使用懒加载。懒加载不会增加首屏加载时间
- Antd整个JS项目有1.25MB，按需加载Antd组件, 可大幅度降低Antd的JS代码，例如只使用一个Button编译后50KB
- 从其他地方节约出这些JS代码的体积，例如所有图片都要进行无损压缩处理
- 前期开发成本上升
- 需要学习新的开发方式、组件化开发思路
- 需要初略了解NodeJS开发环境
- React全家桶的学习成本较高
文尾：全副武装，才能在需求面前存活
相关文档
- React https://doc.react-china.org/
- Antd https://ant.design/docs/react/introduce-cn
- Redux http://www.redux.org.cn/
- React-Router https://reacttraining.com/
网友评论