React框架

React的起源

起初facebook在建设instagram（图片分享）的时候，因为牵扯到一个东西叫数据流，那为了处理数据流并且还要考虑好性能方面的问题，Facebook开始对市场上的各种前端MVC框架去进行一个研究，然而并没有看上眼的，于是Facebook觉得，还是自己开发一个才是最棒的，那么他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，他们就自己开发了一套，果然大牛创造力还是很强大的。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React的出发点

基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的高性能高效率开发。

React与传统MVC的关系

React是一个轻量级的视图层框架

React不是一个完整的MVC框架，最多可以认识是MVC中V(view)层，甚至React并不十分认同MVC的开发模式：React构建页面UI的库，可以简单的理解为React将界面分割成独立的小块，每个块就是一个组件，这些组件可以嵌套、合并，就成了我们的页面

React的高性能的体现： 虚拟DOM

React高性能的原理

通常情况下，我们想要将数据实时反映到页面上需要进行复杂或者重复的dom操作。这会导致性能瓶颈。 ===> 频繁操作真实dom限制了浏览器的性能

针对这种情况，React引入的虚拟DOM(Virtual DOM) 的机制：
在浏览器中用JavaScript实现了一套DOM API。基于React开发时进行的所有DOM操作都是通过虚拟DOM进行。
每当数据发生变化时，React都会重新构建整个虚拟DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）中的两次数据变化会被合并，例如你连续的先将节点内容从A-B，B-A，React会认为A变成B，B变成A，UI不会有任何变化，而如果通过手动控制，这种逻辑是极其复杂的。

尽管每一次都要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的。而对实际DOM操作的仅是diff部分，因而能达到高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的的变化如何更新到一个或者多个的Dom元素，而只需要关系在任意一个数据状态下，整个界面是如何render的。

React Fiber

Fiber是在React16之后发布的一种react核心算法

React Fiber是对核心算法的一次重新实现（官方说法）

之前用的是diff算法在之前的React中，更新过程是同步的，这可能会导致性能问题

当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和对比虚拟DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为JS单线程的特点，如果组件树很大的话，每个同步任务耗时太长，容易出现卡顿现象。

React Fiber的方法就是分片 ： 把一个耗时长的任务分成很多小片，每个小片的运行时间很短，虽然说总时间依然很长，但是在每个小片执行完成之后，都给其他任务一个执行的机会，这样唯一的线程就不会别独占，其他任务依然有运行的机会。

React的特点和优势

1. 虚拟DOM — > 高性能

我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作

而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道

2. 组件系统 — > 高效率

react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component

那么什么是组件呢？

组件指的就是同时包含了html、css、js、image元素的聚合体

使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式

3. 单向数据流

其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

4. JSX语法

在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx