说明
文章所涉及的资料来自互联网，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
概念
React官方描述 ：一个用于构建用户界面的 JavaScript 库
React的历史
React 诞生于 jQuery、AngularJS 与 Backbone.js 相继流行的时代。jQuery 诞生于 2005 年，浏览器兼容性是当时最大的问题。为了解决这个问题， jQuery 封装 DOM 操作，提供样式选择器，封装了 AJAX、链式操作等大量基础函数。但从如今的视角来看，jQuery 并没有解决代码如何组织的问题，甚至不能称之为框架，本质上它只是一个工具函数合集。
2009年，AngularJS 横空出世，带着 Java 开发的先进经验闯入了前端的世界中。 它不仅引入了 MVC 的思想，还强行灌入了 controller、$scope、service 等一系列概念。如同 Spring Boot，AngularJS 提供了一揽子全家桶解决方案，从底层开始深度封装，向上提供了路由、双向绑定、指令、组件等框架特性。
2010年，如果你希望自己的代码有序地组织起来，又不想陷入 Angular.js 无穷无尽的概念中，那么 Backbone.js 就是一个很好的选择 它并没有像 AngularJS 那样带来大量概念，还考虑到了两个方面：
- 与前代的亲和性，只要你懂 jQuery，你就可以继续快乐地写前端代码，而不需要再学习一种语言
- 它考虑了代码的组织性，引入了基础 MVC 的概念，同时提供集合与前端路由的封装，补齐了 jQuery 无序的短板。
所以对于初学者而言， Backbone.js 非常友好，甚至一度流行。选择 Backbone.js 的最主要原因是它使前端项目工程化的成本足够低。这个“低”不光是指开发人员的学习成本低，还有改造成本低，因为大量的 jQuery 存量项目都可以尝试迁移。
但是还有两个问题难以解决：
- 与后端不同的是前端主要以 UI 组件为基础，需要一个可以使组件复用的开发方案，过去常见的复用方案是拼装模板
- 前端工程越来越庞杂，组件作为基本单位应该是可以通过编写单元测试来维持稳定性的。
初次接触 React 的同学会发现，开发 React 的思维模式是完全不同的，概念也极为简单。如果用一个非常简洁的公式来表达，那就是：
View = fn(props)
其次 fn 内部也可以是无数个组件构成的。React 中只有组件，没有页面，没有控制器，也没用模型。没有页面？那就用组件组合生成一个页面，没有控制器，那就用组件充当控制器。就像搭建乐高玩具一样。
当然 React 的变量会更多一些，将 state 和 context 考虑进去，那也是可以表达的：
View = fn(props, state, context)
从实际编码上来讲，fn 可能是一个类组件，也可能是纯函数组件，也可能在函数中产生影响 UI 生成的副作用，比如直接操作 DOM 或者绑定事件等。经典公式总是会展示理想情况，就像 E=mc² 简化了大量的外界干扰因素，但这不妨碍它表达了一个结论，即在 React 中只需要关心两件事：数据与组件。
那为什么会把基本单位定位于组件呢？如果对设计模式有印象的话，你是否还记得“组合优于继承”的铁律？即在构建 UI 视图时，组合组件始终是最优的解决方案。
而 React 是通过组件化的方式解决视图层开发复用的问题，本质是一个组件化框架。
用途
总结来说 构建视图 ——由于 React 虚拟 DOM 的关系，在适用场景上远比传统框架更为广泛： 总结来说有以下几点：
- 首先无论是 PC 网页还是移动端网页，都是完全支持的
- 其次由于 React Native，也可以用于开发 iOS 与 Android 应用
- 还有 React 360 可以开发 VR 应用
- 冷门儿的如 ink，也可以使用 React 开发命令行应用
核心思路
React 的核心思路有三点，分别是声明式、组件化与通用性（官方称之为：一次学习，随处编写）。
声明式
声明式编程的优势在于直观，可以做到一目了然，也便于组合。当你为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
如果是命令式编程，那么会是这样：
// HTML
<div class="block"></div>
// JS
const block = $('.block');
block.css('color', 'red');
如果是 React，则会这样写：
const Block = (props) => <div style={{ color: 'red' }}></div>
组件化
组件化可以降低系统间功能的耦合性，提高功能内部的聚合性。对前端工程化及代码复用有极大的好处。React 组件化最大的区别在于没有使用模板进行编写，而是采用了声明式的 JSX。
创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI
组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
通用性
无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染，或使用 React Native开发原生移动应用。
React使用的虚拟 DOM 什么是虚拟DOM? 说简单点，就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。 具体可以看： zhuanlan.zhihu.com/p/75533792
React 将 DOM 抽象为虚拟 DOM，开发者并不会直接操作 DOM。正因为有这样一层封装，使得 React 不再局限于 Web 开发，而能走向更宽广的平台，出现更繁荣的生态。无论是 Native、VR 还是 Shell 命令，只要兼容虚拟 DOM 层，那么都可以直接运行 React。
优缺点
优点
优点：
- 声明式
- 组件化
- 通用性
缺点
由于 React 并不是一个一揽子框架，比如路由一类的功能，React 团队更希望交给社区来解决。所以导致在技术选型与学习使用上有比较高的成本。但也正因为社区蓬勃发展，非官方的一揽子解决方案还是有的，比如 DvaJS、React-coat 等填补了生态位的缺失。所以 React 也是一个使用者上限与下限差距极大的框架。
