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全家桶的学习成本较高

文尾:全副武装,才能在需求面前存活

相关文档