react是一个javascript框架，用于构建“可预期的”和“声明式的”web用户界面，它已经使facebook更快地开发web应用。下面让我们来看看文章的内容吧
一、特点：
1、简单简单的表述任意时间点你的应用应该是什么样子的，react将会自动的管理ui界面更新当数据发生变化的时候。
2、声明式在数据发生变化的时候，react从概念上讲与点击了f5一样，实际上它仅仅是更新了变化的一部分而已。react是关于构造可重用组件的，实际上，使用react你做的仅仅是构建组建。通过封装，使得组件代码复用、测试以及关注点分离更加容易。
另外还有以下注意点：
react不是一个mvc框架
react不使用模板
响应式更新非常简单
二、主要原理
传统的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方法更新数据
先看个官网demo：
<!doctype html><html><head><script src="http://fb.me/react-0.12.1.js"></script><script src="http://fb.me/jsxtransformer-0.12.1.js"></script></head><body><p id="example"></p><script type="text/jsx">react.render(<h1>hello, world!</h1>,document.getelementbyid('example'));</script></body></html>
很简单，浏览器访问，可以看到hello, world!字样。jsxtransformer.js是支持解析jsx语法的，jsx是可以在javascript中写html代码的一种语法。如果不喜欢，react也提供原生javascript的方法。（想看更多就到react参考手册栏目中学习）
另外一个demo:
<html><head><title>hello react</title><script src="http://fb.me/react-0.12.1.js"></script><script src="http://fb.me/jsxtransformer-0.12.1.js"></script><script src="http://code.jquery.com/jquery-1.10.0.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><style>#content{width: 800px;margin: 0 auto;padding: 5px 10px;background-color:#eee;}.commentbox h1{background-color: #bbb;}.commentlist{border: 1px solid yellow;padding:10px;}.commentlist .comment{border: 1px solid #bbb;padding-left: 10px;margin-bottom:10px;}.commentlist .commentauthor{font-size: 20px;}.commentform{margin-top: 20px;border: 1px solid red;padding:10px;}.commentform textarea{width:100%;height:50px;margin:10px 0 10px 2px;}</style></head><body><p id="content"></p><script type="text/jsx">var staticdata = [{author: "张飞", text: "我在写一条评论~！"},{author: "关羽", text: "2货，都知道你在写的是一条评论。。"},{author: "刘备", text: "哎，咋跟这俩逗逼结拜了！"}];var converter = new showdown.converter();//markdown/** 组件结构：<commentbox><commentlist><comment /></commentlist><commentform /></commentbox>*///评论内容组件var comment = react.createclass({render: function (){var rawmarkup = converter.makehtml(this.props.children.tostring());return (<p classname="comment"><h2 classname="commentauthor">{this.props.author}:</h2><span dangerouslysetinnerhtml={{__html: rawmarkup}} /></p>);}});//评论列表组件var commentlist = react.createclass({render: function (){var commentnodes = this.props.data.map(function (comment){return (<comment author={comment.author}>{comment.text}</comment>);});return (<p classname="commentlist">{commentnodes}</p>);}});//评论表单组件var commentform = react.createclass({handlesubmit: function (e){e.preventdefault();var author = this.refs.author.getdomnode().value.trim();var text = this.refs.text.getdomnode().value.trim();if(!author || !text){return;}this.props.oncommentsubmit({author: author, text: text});this.refs.author.getdomnode().value = '';this.refs.text.getdomnode().value = '';return;},render: function (){return (<form classname="commentform" onsubmit={this.handlesubmit}><input type="text" placeholder="your name" ref="author" /><br/><textarea type="text" placeholder="say something..." ref="text" ></textarea><br/><input type="submit" value="post" /></form>);}});//评论块组件var commentbox = react.createclass({loadcommentsfromserver: function (){this.setstate({data: staticdata});/*
方便起见，这里就不走服务端了，可以自己尝试
$.ajax({url: this.props.url + "?_t=" + new date().valueof(),datatype: 'json',success: function (data){this.setstate({data: data});}.bind(this),error: function (xhr, status, err){console.error(this.props.url, status, err.tostring());}.bind(this)});*/},handlecommentsubmit: function (comment){//todo: submit to the server and refresh the listvar comments = this.state.data;var newcomments = comments.concat([comment]);//这里也不向后端提交了staticdata = newcomments;this.setstate({data: newcomments});},//初始化 相当于构造函数getinitialstate: function (){return {data: []};},//组件添加的时候运行componentdidmount: function (){this.loadcommentsfromserver();this.interval = setinterval(this.loadcommentsfromserver, this.props.pollinterval);},//组件删除的时候运行componentwillunmount: function() {clearinterval(this.interval);},//调用setstate或者父级组件重新渲染不同的props时才会重新调用render: function (){return (<p classname="commentbox"><h1>comments</h1><commentlist data={this.state.data}/><commentform oncommentsubmit={this.handlecommentsubmit} /></p>);}});//当前目录需要有comments.json文件//这里定义属性，如url、pollinterval，包含在props属性中react.render(<commentbox url="comments.json" pollinterval="2000" />,document.getelementbyid("content"));</script></body></html>
效果：
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react框架可以干什么？react框架的详细介绍（附完整的使用实例）的详细内容。