Ant Design学习（一）-----介绍

一、Ant Design 介绍

1.1 背景

如果经常浏览各种网站，就会发现不管网页的主题是什么，通常都会出现一些重复的构件，比如：日历、表格、表单、菜单、卡片、导航栏等。
这些构件的功能和外观都很类似，只是在一些细节的地方，根据需要做了定制。它们就叫做组件，一张完整的网页，可以看做是不同功能的组件的集合。
又由于之前浏览器大战的残留问题，导致即时做出了一个组件，但是其不能很好的适用所有浏览器。
2014年，React 框架发布，为组件提出了一套可行的解决方案。从此，可以用于实际开发的组件库才变成了现实。

1.2 AntDesign

Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的，最早是在2015年发布的，到现在已经发布了三个大版本，目前一共封装了50多个组件。它在国内得到广泛使用，可能是使用量最大的 React 组件库，在国际上也有一定的知名度。
它的功能完备，使用简单。你会发现使用 Ant Design，可以很快做出一张网页，真的就像搭积木一样。
值得一提的是，Ant Design 不仅包括组件，也包括一套设计规范和理念。组件库可以看做是 Ant Design 设计规范的 React 实现。Ant Design 想要带给用户，不仅仅是功能，还包括漂亮的外观和良好的体验。

1.3 React 介绍

Ant Design 是基于 React 开发的。要使用 Ant Design，必须学会 React。
React 是 Facebook 公司推出的一套前端开发框架，是目前全世界最流行的前端框架。

React 本身的 API 并不多，是一个较为简单的框架。但是，要用好它，必须使用其他的配套工具，所以人们常说学习 React 并不是学习一个框架，而是学习一整套 React 技术栈。

1.4 umi 介绍

umijs网址

React 组件使用的是 JSX 语法和很多新的 ES6 语法。另外，不同的组件脚本必须打包在一起，浏览器才能加载。
因此，React 应用有一个构建过程，将源码编译为生产环境代码。这个步骤对于新手来说是比较麻烦的，因为有很多配置的细节，而且包括很多重复的环节，每个项目都必须做一次，也是很烦人的。

因此，一个工具 umi，封装了编译步骤，包括了很多开发时的有用工具。只要你写好 React 代码，接下来 umi 就会把它处理为生产代码。

umi 也是蚂蚁金服体验技术部推出的工具。本课程采用 umi 和 Ant Design 配套使用。

转载自：https://www.yuque.com/ant-design/course/intro

二、前端开发的演变

本文介绍前端开发的历史和趋势，帮助大家了解 React 要解决什么问题。

2.1静态页面阶段

互联网发展的早期，网站的前后端开发是一体的，即前端代码是后端代码的一部分。

1. 后端收到浏览器的请求
2. 生成静态页面
3. 发送到浏览器
   那时的前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告。
   那时的网站开发，采用的是后端 MVC 模式。
   • Model（模型层）：提供/保存数据
   • Controller（控制层）：数据处理，实现业务逻辑
   • View（视图层）：展示数据，提供用户界面
   前端只是后端 MVC 的 V。

2.2AJAX 阶段

2004年，AJAX 技术诞生，改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现，使得开发者发现，前端的作用不仅仅是展示页面，还可以管理数据并与用户互动。
AJAX 技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。整个过程中，后端只是负责提供数据，其他事情都由前端处理。前端不再是后端的模板，而是实现了从“获取数据 --》 处理数据 --》展示数据”的完整业务逻辑。
就是从这个阶段开始，前端脚本开始变得复杂，不再仅仅是一些玩具性的功能。

2.3 前端 MVC 阶段

前端代码有了读写数据、处理数据、生成视图等功能，因此迫切需要辅助工具，方便开发者组织代码。这导致了前端 MVC 框架的诞生。

2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。因为，Backbone 认为前端 Controller 与后端不同，不需要、也不应该处理业务逻辑，只需要处理 UI 逻辑，响应用户的一举一动。所以，数据处理都放在后端，前端只用事件响应处理 UI 逻辑（用户操作）。

后来，更多的前端 MVC 框架出现。另一些框架提出 MVVM 模式，用 View Model 代替 Controller。MVVM 模式也将前端应用分成三个部分。
• Model：读写数据
• View：展示数据
• View-Model：数据处理
View Model 是简化的 Controller，所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处理好的数据，不含其他逻辑。也就是说，Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。

这个模型的特点是 View 绑定 View Model。如果 View Model 的数据变了，View（视图层）也跟着变了；反之亦然，如果用户在视图层修改了数据，也立刻反映在 View Model。整个过程完全不需要手工处理。

2.4 SPA 阶段

前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page application）。

所谓 SPA，就是指在一张网页（single page）上，通过良好的体验，模拟出多页面应用程序（application）。用户的浏览器只需要将网页载入一次，然后所有操作都可以在这张页面上完成，带有迅速的响应和虚拟的页面切换。

随着 SPA 的兴起，2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。

目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。

2.5 React 的定位

React 本身的定位很单纯，它是一个网页组件的解决方案。也就是说，它只解决怎么把复杂的页面拆分成一个个组件，然后一个个独立的组件又怎么拼装成可以互相协同的网页。

组件是中性的，任何一种应用架构都可以采用。因此，React 可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。

转载自：https://www.yuque.com/ant-design/course/sc1lvc