# 用 React+TS+Antd 快速入门到 NodeJS 全栈项目实战(附源码)
## 前言
> 趁着周末完成了一个小 Dome 项目,前端技术用到 React 全家桶 + TypeScript + Antd。恶补了一下相关知识点,就迫不及待的想着分享出来。其实自己很久都没用过的 React.js 前端框架,大厂必备面试必问,作为前端三大主流框架之一,也是最流行的,因为它的设计很优秀。之前作者一直都在用 Vue.js 框架,是最火的一门前端框架,它是中国人开发的,对我们来说,文档要友好一些,上手更快。
## React 是什么?
### 介绍
- React 是一个用于构建用户界面的 JavaScript 库;
- React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图);
- React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源;
- React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
### 特点
1. 声明式设计 - React 采用声明范式,可以轻松描述应用;
2. 高效 - React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互;
3. 灵活 - React 可以与已知的库或框架很好地配合;
4. JSX - JSX 是 JavaScript 语法的扩展,React 开发不一定使用 JSX ,但我们建议使用它;
5. 组件化 - 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中;
6. 单向响应的数据流 React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
### 缺点
- 对于一直使用 JS,jQuery 的传统前端,React 非常不友好;
- React 强调组件和状态管理,其世界观是面向程序语言的;
- Vue.js 强调视图的自动同步,其世界观是面向 UI 脚本的;
- React 的学习成本较 Vue.js 高;
- React 本身没有全家桶,只做 UI 界面。
### 为什么要用 React ?
- 和其他框架相比,React 设计很优秀,一切基于 JavaScript 并且实现了组件化开发的思想;
- 开发团队实力强悍,不必担心不更新的情况;
- 强大的社区支持,很多问题都能找到对应的解决方案;
- 提高工作效率,虚拟 DOM 操作,组件可复用,有效使用开发工具;
- 受到大厂的信赖,前端项目的技术选型采用的是 React.js;
- 提供了无缝切换到 React Native 上的移动端开发体验,让我们的技术能力得到了拓展,增强了我们的核心竞争力。
React 的设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
## 理解几个核心概念
### 虚拟 DOM(Virtual Document Object Model)
- DOM 的本质是什么:浏览器中的概念,用 JS 对象来表示页面上的元素,并提供了操作 DOM 对象的 API;
- 什么是 React 中的虚拟 DOM:是框架中的概念,是程序猿用 JS 对象来模拟页面上的 DOM 元素和嵌套关系(虚拟 DOM 是以 JS 对象的形式存在);
- 为什么要实现虚拟 DOM:为了实现页面中,DOM 元素的高效更新。
### Diff 算法
- Tree Diff - 新旧两棵 DOM 树,逐层对比的过程,就是 Tree Diff。当整棵 DOM 树逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
- Component Diff - 在进行 Tree Diff 的时候,每一层中,组件级别的对比,叫做 Component Diff。如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新。如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
- Element Diff - 在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这叫做 Element Diff。
### 生命周期函数
1)组件创建阶段:一辈子只执行一次
- componentWillMount:组件将要被挂载(16.3 版本以后已废弃);
- render:第一次开始渲染真正的虚拟 DOM,当 render 执行完。内存中就有完整的虚拟 DOM 了;
- componentDidMount:组件完成挂载,此时组件已经显示在页面上。
2)组件运行阶段:按需根据 props 属性或 state 状态的改变,有选择性的执行 0 次到多次
- componentWillReceiveProps:组件将要接受新的属性(16.3 版本以后已废弃);
- shouldComponentUpdate:组件是否需要进行更新。此时,组件尚未被更新;
- componentWillUpdate:组件将要被更新(16.3 版本以后已废弃);
- render:根据新的 state 和 props 重新的渲染内存中的虚拟 DOM 数;
- componentDidUpdate:此时页面被重新渲染。
3)组件销毁阶段:一辈子只执行一次
- componentWillUnmount:组件将要被卸载的时候。
![](https://www.writebug.com/myres/static/uploads/2021/11/22/d91b799376dac31c4ea559b7172ebfb3.writebug)
### 高阶组件
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
具体而言,高阶组件是参数为组件,返回值为新组件的函数。
组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。
### 状态 state 和属性 props 的区别
- 从来源上来看,状态是组件内部创建并维持的,属性虽然也可以在组件内创建,但一般是从父组件传递过来;
- 属性可以由父组件修改,状态不能;
- 父组件能设置子组件的属性初始值,状态不行;
- 状态只能在组件内部更新,属性除非外部组件主动传来新的 props 否则永远保持不变。
以上内容是对 React 的初步认识,如需详细学习可以移步到 React 官网 [reactjs.org/](https://link.juejin.cn/?target=https%3A%2F%2Freactjs.org%2F)
## TypeScript 是什么?
### 介绍
- TypeScript 是 JavaScript 类型的超集,支持 ECMAScript 6 标准;
- TypeScript 由微软开发的自由和开源的编程语言;
- TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器、任何计算机和任何操作系统上。
### 语言特性
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- async / await
- 类
- 模块
- 箭头函数表达式
- 可选参数和默认参数
### 为什么要用 TypeScript?
- 增加了代码的可读性和可维护性,增加了编辑器和 IDE 的功能;
- 拥有活跃的社区,拥抱 ES6 规范;
- TypeScript 非常包容,后缀 .js 文件可以直接重命名 .ts 即可。
### 缺点
- 有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念;
- 短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本;
- 集成到构建流程需要一些工作量;
- 可能和一些库结合的不是很完美。
上述内容是对 TypeScript 的初步认识,如需详细学习可以移步到 TypeScript 官网 [www.typescriptlang.org/](https://link.juejin.cn/?target=https%3A%2F%2Fwww.typescriptlang.org%2F)
另外推荐学习 [TypeScript 入门教程](https://link.juejin.cn/?target=https%3A%2F%2Fts.xcatliu.com%2F)
## Ant Design of React (简称 antd)
### 介绍
antd 是基于 [Ant Design](https://link.juejin.cn/?target=https%3A%2F%2Fant.design%2Fdocs%2Freact%2Fintroduce-cn) 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
### 特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的�