React & Ant-Design 学习总结

一、前言

　　最近公司要求使用Ant-Design-Pro搭建活动中台，由于之前只使用过Bootstrap，而Ant-Design-Pro是蚂蚁金服自己基于React封装的一个前端框架，相当于自己从零开始学习了一段时间React，所以总结一下，加深理解。

二、React基本概念总结

1.React概念

　　FaceBook开发的一款前端框架，适合大型复杂网站开发

2.JSX

　　JavaScript的扩展语法，经过babel编译成JS

4.TypeScript

　　类似于java的泛型对象，传递和返回的参数都需要建立类型约束

5.参数传递

　　state：react状态机，保存页面需要渲染的数据，调用组件setState方法，实现数据的更新

　　props:  组件之间的参数传递，当前组件提供this.props获取传递进来的属性

6.DOM

　　文档对象模型，DOM定义了访问HTML或是XML文档的标准，是一种使程序动态的访问，更新HTML文档或XML文档等的内容，结构以及样式的平台，操作接口，DOM定义了文档的对象和属性，以及访问它们的接口

6.VirtualDOM

　　虚拟DOM对象，是 React中的DOM对象。React使用JSX编写虚拟DOM对象，经过Babel编译之后会生成真正的DOM. 然后会将真正的DOM插入(Render)到页面;没一个VDOM都包含三个属性：type:节点类型，props：节点属性，children: 节点的子节点，可以在控制台使用view命令查看当前VDOM结构，如下图：

 

 

 

三、React VDOM实现原理　

　　react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树，在改动完组件后，会再生成一个新得DOM，react 会把新虚拟DOM 跟原虚拟DOM 进行比对，找出两个DOM 不同的地方diff ，然后把diff放到队列里面，然后批量更新diff 到真实DOM 上

优点：最终真实DOM 就只更新了diff 部分，提高了渲染速度

缺点：首次渲染DOM 时候由于多了一层虚拟DOM 计算，就比html 渲染慢

四、Ant-Design-Pro总结

1.Ant-Design-Pro：蚂蚁金服基于React开发的一款前端UI框架，包含路由，导航菜单，国际化，多环境等配置；

2.项目目录结构：

├── mock                     # 本地模拟数据
├── public
│   └── favicon.ico          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── common               # 应用公用配置，如导航信息
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # dva model
│   ├── routes               # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── g2.js                # 可视化图形配置
│   ├── theme.js             # 主题配置
│   ├── index.ejs            # HTML 入口模板
│   ├── index.js             # 应用入口
│   ├── index.less           # 全局样式
│   └── router.js            # 路由入口
├── tests                    # 测试工具
├── README.md
└── package.json

3.使用Mock数据和接口数据

　　Mock数据：在mock目录下建立mock接口，配置相关数据

　　接口数据：在config中配置proxy，将数据请求发送到后端接口，启动的时候关闭mock：npm run dev:no-mock，proxy配置如下：

export default {
  dev: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  test: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};