React简单介绍

Flux是一个系统架构,用于推进应用中的数据单向流动。React是一个JavaScript框架,用于构建“可预期的”和“声明式的”Web用户界面。

官网对于React所解决的问题的描述:

We built React to solve one problem: building large applications with data that changes over time.

构建哪些数据会随时间改变的大型应用,React有两个主要的特点:

  1. 简单。

    简单的表述任意时间点你的应用应该是什么样子的,React将会自动的管理UI界面更新当数据发生变化的时候。

  2. 声明式。

    当数据发生变化的时候,React从概念上讲与电机了F5一样,实际上它仅仅是更新了变化的一部分而已。
    React是关于构造可重用组建的,实际上,使用React你做的仅仅是构建组件。通过封装,使得组件代码复用、测试以及关注点分离更加容易。

其他特点

  • React不是一个MVC框架
  • React不使用模板
  • 响应式更新非常简单
  • HTML5仅仅是个开始

React主要的原理

Virtual DOM 虚拟DOM

传统的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。

Components组件

在DOM树上的节点被称为元素,在这里则不同,Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件,它是由commponents组成。

component的使用在React里极为重要,因为components的存在让计算DOM diff更高效

State和Render

React是如何呈现真实的DOM,如何渲染组件,什么时候渲染,怎么同步更新的,这就需要简单了解下State和Render了,state属性包含定义组件所需要的一些数据,当数据发生变化时,将会调用Render重新渲染,这里只能通过提供的setState方法更新数据。

比较分析

和其他的一些js框架如Backbone、Angular相比:

  • React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI,也就是view层。
  • 其实React是单向的从数据到视图的渲染,非双向数据绑定。
  • 不直接操作DOM对象,而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
  • 不便于直接操作DOM,大多数时间只是对virtual DOM进行编程。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容