基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】

# 用 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：组件将要被卸载的时候。  ### 高阶组件 高阶组件（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 组件库，主要用于研发企业级中后台产品。 ### 特性 - 提炼自企业级中后台产品的交互语言和视觉风格。 - 开箱即用的�