认识 react
1.1 React 是什么？
React是什么呢？这里我们来看一下官方对它的解释：用于构建用户界面的 JavaScript 库。
我们知道对于前端来说，主要的任务就是构建用于界面，而构建用于界面离不开三个技术：
-
HTML：构建页面的结构
-
CSS：构建页面的样式
-
JavaScript：页面动态内容和交互
那么使用最原生的HTML、CSS、JavaScript可以构建完整的用户界面吗？当然可以，但是会存在很多问题
-
比如操作DOM的时候会出现兼容性的问题；
-
比如要写出更具有兼容性代码，代码有冗余问题；
-
比如代码组织和规范的问题；
所以，一直以来前端开发人员都在寻求可以让自己开发更方便的JavaScript库：
-
在过去的很长时间内，jQuery是被使用最多的JavaScript库；
-
在过去的一份调查中显示，全球前10,000个访问最高的网站中，有65%使用了jQuery，是当时最受欢迎的JavaScript库；
-
但是越来越多的公司开始慢慢不再使用jQuery，包括程序员使用最多的GitHub；
现在前端领域最为流行的是三大框架：
-
Vue
-
React
-
Angular
而Angular在国内并不是特别受欢迎，尤其是Angular目前的版本对TypeScript还有要求的情况下。
Vue和React是国内最为流行的两个框架，而他们都是帮助我们来构建用户界面的JavaScript库。
1.2 React的起源
React是2013年，Facebook开源的JavaScript框架，那么当时为什么Facebook要推出这样一款框架呢？
这个源于一个需求，所产生的bug：
该功能上线之后，总是出现bug：
- 三个消息的数字在发生变化时，过多的操作很容易产生bug；
bug是否可以修复呢？当然可以修复，但是Facebook的工程师并不满足于此； 他们开始思考为什么会产生这样的问题；
-
在传统的开发模式中，我们过多的去操作界面的细节；（前端、iOS、Android）
- 比如说需要掌握和使用大量DOM的API，当然我们可以通过jQuery来简化和适配一些API的使用；
-
另外关于数据（状态），往往会分散到各个地方，不方便管理和维护；
他们就去思考，是否有一种新的模式来解决上面的问题：
-
以组件的方式去划分一个个功能模块
-
组件内以jsx来描述UI的样子，以state来存储组件内的状态
-
当应用的状态发生改变时，通过setState来修改状态，状态发生变化时，UI会自动发生更新
1.3 React的特点和优势
1.3.1 React的特点
1.3.1.1 声明式编程
-
声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
-
它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；
-
UI 就是视图层，视图层的开发依赖于 state
-
state 指的就是状态
-
f 指的就是一个函数，在React 中指的就是 render 函数，在 flutter 中就是 builder 函数
1.3.1.2 组件化开发
- 组件化开发页面目前前端的流行趋势，组件化开发会将复杂的界面拆分成一个个小的组件
