加载中…#React# 201 React简介
(2017-11-28 10:01:00)| 分类： 计算机相关 |
React 发源自facebook
的PHP框架XHP的一个分支，XHP作为一个ＰＨＰ框架，旨在每次有请求进来时渲染整个页面。React的产生是为了把这种渲染页面的PHP式工作流带到客户端应用中来。
React不是一个MVC框架
React不使用模板
响应式更新非常简单
HTML5仅仅是个开始
传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是Virtual
DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual
DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。
为什么通过这多一层的Virtual DOM操作就能更快呢？
这是因为React有个diff算法，更新Virtual
DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。
在DOM树上的节点被称为元素，在这里则不同，Virtual
DOM上称为commponent。Virtual
DOM的节点就是一个完整抽象的组件，它是由commponents组成。
State
和 Render
React是如何呈现真实的DOM，如何渲染组件，什么时候渲染，怎么同步更新的，这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染，这里只能通过提供的setState方法更新数据。
虚拟DOM的精髓所在有两点：性能和抽象
通过js对象模拟原生DOM（js对象性能比DOM性能高），再加上DOM diff算法，极大地提升了DOM操作的性能。虚拟DOM最大的意义是对DOM进行了一层抽象，而且这个抽象在我们使用React时，感觉不是特别明显，毕竟我们再js中写的标签跟原生的没有什么区别，并且最终都被渲染成了DOM对象。这也恰恰说明react抽象了DOM的具体实现。在浏览器中，虚拟DOM最终编译成了DOM；在IOS中虚拟DOM完全可以编译成oc中的组件，在Android中完全可以编译成Android对应的UI组件。所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新;
React**能够批处理虚拟DOM的刷新**，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
JS业务逻辑代码完全可以借助Node移植到任意平台上
虚拟DOM在不同平台上的抽象有不同实现，不能完全移植，但是用法基本一致
最底层的UI调用我们就不用关心了
喜欢
0
赠金笔
后一篇：#React# 202 JSX