呼应式体系与react结构 | 青训营笔记

这是我参与[第四届青训营]笔记创作活动的第6天

在了解React结构之前，我们有必要了解一些以下根本知识：

  • HTML、CSS、JS的根底；
  • 会根底的数据结构/算法知识，比如二叉树、深度广度遍历；
  • 会运用浏览器供给的DOM API来修正DOM，更新UI。
    那么，究竟React结构是什么样的以及它的规划思路是怎样的，下面具体介绍。

一、什么是React？

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上一切JavaScriptMVC结构都不满意，决定自行开发一套，用于架起Instagram的网站。于2013年5月开源。

1.1 结构用处

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，协助你烘托出UI、也可所以静态的HTMLDOM元素、也可以传递动态变量、乃至是可交互的应用组件。

1.2 结构特色

1.声明式规划：React 使创立交互式 UI 变得轻而易举。为你应用的每一个状况规划简练的视图，当数据变化时 React能高效更新并烘托合适的组件；
2.组件化: 构建管理自身状况的封装组件，然后对其组合以构成杂乱的 UI；
3.高效：React经过对DOM的模仿，最大极限地减少与DOM的交互；
4.灵敏：无论你现在运用什么技术栈，在无需重写现有代码的前提下，经过引进React来开发新功能。

二、React的规划思路

在UI编程里，会存在一些问题，状况更新UI不会自动更新，需求手动的调用DOM进行更新。短缺根本的代码层面的封装和隔离，代码层面没有组件化。UI之间的数据依靠联系需求手动保护，假如依靠链路长，则会遇到“Callback Hell”。所以呈现了呼应式体系和转化式体系

熟悉响应式与React框架
呼应式体系需求具有这些特征：及时呼应性（Responsive）、恢复性（Resilient）、有弹性（Elastic）以及音讯驱动（Message Driven）。我们把具有上面四个特性的体系就叫做呼应式体系。
上面的四个特性中，及时呼应性（Responsive）是体系终究要到达的目标，恢复性（Resilient）和有弹性（Elastic）是体系的表现形式，而音讯驱动（Message Driven）则是体系构建的手法。

熟悉响应式与React框架
呼应式体系的终极架构图：
熟悉响应式与React框架
下面简略介绍一下呼应式编程：
这是简略的一个呼应式编程的进程：
熟悉响应式与React框架
在呼应式编程里，很好的解决了UI编程的问题。
状况更新，UI自动更新；前端代码组件化，可复用，可封装；状况之间的相互依靠联系，只需声明即可。 所以React的规划以及完成一个是运用呼应式编程，一个是组件化。
组件化：是从UI界面的视点进行区分的，前端的组件化，便利UI组件的复用. 组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面依据内容的需求，去盛放相关组件即可组成完好的页面,每个组件有独立的HTML、css、js代码.组件内拥有状况，外部不可见，父组件可将状况传入组件内部。组件是React的中心，一个完好的React应用是由若干个组件建立起来的，每个组件有自己的数据和方法，组件具体如何区分，需求依据不同的项目来确定，而组件的特征是可复用，可保护性高。
下图中的“当时价格”的状况归于谁？
熟悉响应式与React框架
应该是归于Root。在状况归属问题中，应该是从两个节点向上寻找最近的祖宗节点，那么该如何改变价格？

熟悉响应式与React框架

三、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的完成问题上，学习的仍是不够了解透彻，相对应的知识点还需求再持续深入学习。