93 lines
2.5 KiB
Markdown
93 lines
2.5 KiB
Markdown
# *React* 基本介绍
|
||
|
||
|
||
|
||
本章主要包含以下内容：
|
||
|
||
|
||
|
||
- *React* 基本介绍
|
||
- *React* 特点
|
||
- 搭建开发环境
|
||
|
||
|
||
|
||
## *React* 基本介绍
|
||
|
||
*React* 起源于 *Facebook* 的内部项目，因为该公司对市场上所有 *JavaScript MVC* 框架都不满意，就决定自己写一套，用来架设 *Instagram* 的网站。
|
||
|
||
*React* 的实质其实是一个用于构建用户界面的 *JavaScript* 库。*React* 主要用于构建 *UI*。*React* 于 *2013* 年 *5* 月开源，由于拥有较高的性能，代码逻辑简单，越来越多的人已开始关注和使用它。
|
||
|
||
>*UI* = *fn(state)*
|
||
|
||
由于 *React* 的设计思想极其独特，属于革命性创新，性能出众，所以，越来越多的人开始关注和使用，认为它可能是将来 *Web* 开发的主流工具。
|
||
|
||
这个项目本身也越滚越大，从最早的 *UI* 引擎变成了一整套前后端通吃的 *Web App* 解决方案。
|
||
|
||
|
||
|
||
*React* 官网：*https://reactjs.org/*
|
||
|
||
|
||
|
||
*React* 从诞生到现在，一直在给我们带来各种各样的惊喜。甚至从 *2015* 年开始，每年都会举行 *React Conf* 大会，介绍 *React* 本年度所更新的新特性有哪些。
|
||
|
||
|
||
|
||
>*React Conf* 官网：*https://conf.reactjs.org/*
|
||
>
|
||
>*React Conf* 油管视频：*https://www.youtube.com/channel/UC1hOCRBN2mnXgN5reSoO3pQ*
|
||
|
||
|
||
|
||
下面介绍一下 *React* 几个重要版本的重大更新：
|
||
|
||
- *React 16* :出现了 *Fiber*，整个更新变的可中断、可分片、具有优先级
|
||
- *React 16.8*：推出了 *Hooks*，标志着从类组件正式转为函数组件
|
||
- *React 17*：过渡版本，没有添加任何面向开发人员的新功能。而主要侧重于**升级简化 *React* 本身**。
|
||
- *React 18*
|
||
- *transition*
|
||
- *Suspense*
|
||
- 新的 *Hooks*
|
||
- *Offscreen*
|
||
- ......
|
||
|
||
|
||
|
||
## *React* 特点
|
||
|
||
在 *React* 官网中，罗列了 *3* 个特点：
|
||
|
||
- 声明式
|
||
- 组件化
|
||
- 一次学习，跨平台编写
|
||
|
||
|
||
|
||
除此之外，*React* 还具有如下的特点：
|
||
|
||
- 单向数据流
|
||
- 虚拟 *DOM*
|
||
- *Diff* 算法
|
||
|
||
|
||
|
||
## 搭建开发环境
|
||
|
||
虽然官方提供了通过 *CDN* 引入 *React* 的方式：*https://zh-hans.reactjs.org/docs/cdn-links.html*
|
||
|
||
但是实际开发中肯定是使用 *React* 的脚手架工具来搭建项目，*React* 官方提供了脚手架工具 *Create React App*：
|
||
|
||
*https://create-react-app.dev/*
|
||
|
||
|
||
|
||
快速开始：
|
||
|
||
```js
|
||
npx create-react-app my-app
|
||
cd my-app
|
||
npm start
|
||
```
|
||
|