响应式系统与react框架 | 青训营笔记
这是我参与[第四届青训营]笔记创作活动的第6天
在了解React框架之前，我们必须熟悉一些以下基本知识：
- HTML、CSS、JS的基础；
- 会基础的数据结构/算法知识，比如二叉树、深度广度遍历；
- 会使用浏览器提供的DOM API来修改DOM，更新UI。
那么，究竟React框架是什么样的以及它的设计思路是怎样的，下面详细介绍。
一、什么是React？
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
1.1 框架用途
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
1.2 框架特点
1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件；
2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI；
3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互；
4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。
二、React的设计思路
在UI编程里，会存在一些问题，状态更新UI不会自动更新，需要手动的调用DOM进行更新。欠缺基本的代码层面的封装和隔离，代码层面没有组件化。UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。所以出现了响应式系统和转换式系统
响应式系统需要具备这些特征：及时响应性（Responsive）、恢复性（Resilient）、有弹性（Elastic）以及消息驱动（Message Driven）。我们把具有上面四个特性的系统就叫做响应式系统。
上面的四个特性中，及时响应性（Responsive）是系统最终要达到的目标，恢复性（Resilient）和有弹性（Elastic）是系统的表现形式，而消息驱动（Message Driven）则是系统构建的手段。
响应式系统的终极架构图：
下面简单介绍一下响应式编程：
这是简单的一个响应式编程的过程：
在响应式编程里，很好的解决了UI编程的问题。
状态更新，UI自动更新；前端代码组件化，可复用，可封装；状态之间的相互依赖关系，只需声明即可。
所以React的设计以及实现一个是使用响应式编程，一个是组件化。
组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的复用. 组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面,每个组件有独立的HTML、css、js代码.组件内拥有状态，外部不可见，父组件可将状态传入组件内部。组件是React的核心，一个完整的React应用是由若干个组件搭建起来的，每个组件有自己的数据和方法，组件具体如何划分，需要根据不同的项目来确定，而组件的特征是可复用，可维护性高。
下图中的“当前价格”的状态属于谁？
应该是属于Root。在状态归属问题中，应该是从两个节点向上寻找最近的祖宗节点，那么该如何改变价格？
三、React的实现
3.1 了解jsx的语法
jsx其实是一种语法糖，是js的一种扩展语法，它可以让你在js中直接书写html代码片段，并且React推荐我们使用jsx来描述我们的界面
// 直接在js中，将一段html代码赋值给js中的一个变量
const element = <h1>Hello, react!</h1\>;
React代码在打包编译的过程中，会通过babel进行转化，会对jsx中的html片段进行解析，解析出来标签名、属性集、元素，并且作为参数传递到React提供的createElement方法中执行。所以上面代码就会变成：
const element = React.createElement("h1", null, "Hello, react!");
React的createElement()方法作用就是创建虚拟DOM，虚拟DOM其实就是一个普通的JavaScript对象，里面包含了tag、attrs、children等属性。
babel解析jsx后，如果有多个子节点，那么所有的子节点都会以参数的形式传入createElement函数中，所以createElement的第三个参数可以用es6剩余参数语法，以一个数组的方式来接收所有的子节点。
react上已经添加了createElement函数了，然后在src/index.js中引入react模块即可。
当能够拿到对应的虚拟DOM节点时，由于虚拟DOM只是一个普通的JavaScript对象，不是真正的DOM，所以需要对虚拟DOM进行render，创建对应的真实DOM并添加到页面中，才能在页面中看到，react中专门提供了一个ReactDOM模块用于处理DOM相关的操作。
render函数主要就是判断传递过来的vnode是一个字符串还是虚拟DOM节点对象，如果是字符串，那么直接创建文本节点并添加到容器中即可；如果是虚拟DOM对象，那么根据其tag创建对应的真实DOM元素节点，然后遍历节点属性，将其添加到元素节点上，再处理子节点，遍历子节点递归渲染即可，整个虚拟DOM渲染好之后，将其加到容器中即可。\
四、总结
通过学习，了解了React框架以及它的设计思路，对响应式编程也有相应的了解，在React的实现问题上，学习的还是不够熟悉透彻，相对应的知识点还需要再继续深入学习。
