React是什么

React是如今(2015年)最热门的前端技术。

在React中。一切皆组件。

A JavaScript library for building user interfaces

React不过用于构建用户界面的js库(MVC中的V),不是完整的MV*框架,所以和Angular、Backbone和Ember没有可比性。

使用jQuery操作DOM的日子或许会成为过去。


React的特点

(1) 不过UI

React不过MVC中的V。

(2) 虚拟DOM

React为了更高超的性能而使用虚拟DOM作为其不同的实现。

它同一时候也可以由服务端Node.js渲染 - 而不须要过重的浏览器DOM支持。

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同一时候也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。

React推荐以组件的方式去又一次思考UI构成,将UI上每个功能相对独立的模块定义成组件。然后将小的组件通过组合或者嵌套的方式构成大的组件,终于完毕总体UI的构建。

(3) 单向数据流

React实现了单向响应的数据流,从而降低了反复代码。这也是它为什么比传统数据绑定更简单。


React在解决什么问题

在Web开发中,我们总须要将变化的数据实时反应到UI上,这时就须要对DOM进行操作。而 复杂或频繁的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会觉得UI不发生不论什么变化。而假设通过手动控制,这样的逻辑一般是极其复杂的。虽然每一次都须要构造完整的虚拟DOM树,可是由于虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的不过Diff部分,因而能达到提高性能的目的。这样。在保证性能的同一时候。开发人员将不再须要关注某个数据的变化怎样更新到一个或多个详细的DOM元素。而只须要关心在随意一个数据状态下。整个界面是怎样Render的。


【React】初识React的更多相关文章

  1. React 初识

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

  2. React初识整理(五)--Redux和Flux(解决状态传递问题)

    Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...

  3. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  4. 前端笔记之React(一)初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  5. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  6. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  7. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  8. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  9. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  10. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

随机推荐

  1. 洛谷P2234 [HNOI2002] 营业额统计 [splay]

    题目传送门 营业额统计 题目描述 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天 ...

  2. 抓包分析LVS-NAT中出现的SYN_RECV

    CIP:192.168.10.193 VIP:192.168.10.152:8000 DIP:100.10.8.152:8000 RIP:100.10.8.101:8000 和 100.10.8.10 ...

  3. C和指针之学习笔记(3)

    第8章 数组 1.数组与指针 数组名是一个个元素的地址. int  a[10];  int  b[10];  int  *c; (1) c = & a[0]; &a[0]表示一个指向数 ...

  4. MongoDB——环境搭建

    项目中需要将一些读多改少的数据存入到 MongoDB 数据库中来提高效率,于是简单学习一些MongoDB数据库的知识,来进行应对,也是对自己知识盲区进行补充.本文主要学习介绍MongoDB数据库在Li ...

  5. redis_NoSql入门概述

    一.为什么要使用Nosql 今天我们可以通过第三方平台(如:google,facebook)可以很容易的访问和抓取数据.用户的个人信息,社交网络,地理位置,用户生成的数据和用户操作日志已经成倍的增加. ...

  6. [APIO2014]序列分割 --- 斜率优化DP

    [APIO2014]序列分割 题目大意: 你正在玩一个关于长度为\(n\)的非负整数序列的游戏.这个游戏中你需要把序列分成\(k+1\)个非空的块.为了得到\(k+1\)块,你需要重复下面的操作\(k ...

  7. 【随机化】【并查集】Gym - 100851J - Jump

    题意:交互题,有一个长度为n(偶数)的二进制串,你需要猜不超过n+500次猜到它.如果你猜的串与原串相同的位数为n,那么会返回n,如果为n/2,那么会返回n/2,否则都会返回零. 先random,直到 ...

  8. [HZOI 2016]我们爱数数

    [HZOI 2016]我们爱数数 题目大意: 一张圆桌,每个位置按顺时针从\(1\)到\(n\)编号.有\(n\)个人,编号从\(1\)到\(n\).如果编号为\(i\)的人坐到了编号为\(i\)的位 ...

  9. java中代码块的认知

    在以往面试题中,出现过很多次关于代码块执行顺序的题目,目前可算是搞清楚执行顺序了.看以下代码: package com.itcast.code; public class BlockTest { st ...

  10. 15KW电动机380V及220V时的电流分别为多少

    15KW电动机380V及220V时的电流分别为多少 当用电电压为380V时:P=UICOSφ/1.72,此时电流为: I=15KW/380V/0.83(COSφ,功率因数)/1.72x1000=27. ...