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/