一.react的优势

1、React速度很快:它并不直接对DOM进行操作,引入了一个叫做虚拟DOM的概念,安插在javascript逻辑和实际的DOM之间,性能好。

2、跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3、一切都是component:代码更加模块化,重用代码更容易,可维护性高。

4、单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5、同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化(SEO)。

6、兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

二.demo详解

废话少说,直接上代码:

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var RepoList = React.createClass({ //创建一个组件类
getInitialState: function() { //设置state的初始值
return {
loading: true,
error: null,
data: null
};
}, componentDidMount() { //组件渲染成功后触发,一般用于处理后台传输的数据
this.props.promise.then( //props 用于接受组件外的数据
value => this.setState({loading: false, data: value}), //setstate可以更新state的值,使组件重新渲染render
error => this.setState({loading: false, error: error}));
}, render: function() {
if (this.state.loading) { //state用于接收组件内部的数据
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo, index) {
return (
<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li> //key用于唯一标识每个组件
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
}); ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.getElementById('example')
);
</script>
</body>
</html> <!--备注:
promise.then():then方法带有2个参数then(sucessed(),error());
其中value => this.setState({loading: false, data: value}),相当于:function(value){this.setState({loading: false, data: value})}
它是成功的回掉函数。
而error => this.setState({loading: false, error: error}));则为失败的回调函数。-->

  

总结:

前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM。从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了。

react基本demo详解的更多相关文章

  1. Spring AOP四种实现方式Demo详解与相关知识探究

    一.前言 在网络上看到一篇博客Spring实现AOP的4种方式,博主写的很通俗易懂,但排版实在抓狂,对于我这么一个对排版.代码格式有强迫症的人来说,实在是不能忍受~~~~(>_<)~~~~ ...

  2. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  3. Facebook力推导航库:React Navigation使用详解

    本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...

  4. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  5. {转自MC}NVIDIA DirectX 11演示DEMO详解

    http://tieba.baidu.com/p/1960826986 图形技术无论如何发展,最终都要落到实际的应用中才有效果.在个人电脑上,图形技术最大的用户除了显示UI和操作界面外,就是呈现美轮美 ...

  6. SSH登录与增删改查demo详解+源代码

    点击下载,测试绝对可用SSH整合框架登录加增删改查demo 下载地址:http://download.csdn.net/detail/qq_33599520/9784679   一.框架概述 spri ...

  7. React之key详解

    一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...

  8. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  9. React生命周期函数详解

    React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...

随机推荐

  1. arcgis 线段合并

    对于上面这种这种有一个字段相同的 线段,使用 使用后生成的矢量如下

  2. tdd:(react + mocha)环境配置

    写在前面: 在git上面clone一些项目的时候老是可以看到一些测试文件,于是就学习了一下TDD: TDD —— Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核 ...

  3. 一张图看懂CSS cascade, specific, importance, inheritance

    http://www.w3.org/TR/CSS21/cascade.html#inheritance http://www.w3.org/TR/CSS21/cascade.html#cascade ...

  4. Linux ->> VMWare Workstation虚拟机里的UBuntu系统安装VMWare-tools

    1) mkdir创建一个临时目录 2)复制gz压缩包到临时目录下 3)解压到当前目录 4)运行.pl文件安装 root@ubuntu:/# root@ubuntu:/# cd /tmp/ root@u ...

  5. linux下清空文件的几种方式以及对比

    : > filename> filenamecat /dev/null > filename上面这3种方式,能将文件清空,而且文件大小为0而下面两种方式,会让文件中存在空格,导致大小 ...

  6. Python学习---重点模块之json

    注意:JSON不能转换类,不能转换函数 重点方法示例 json.dumps():实现文件写入,字符串转换[写入文件当然是JSON字符串楼] 实际上,json.dumps()只是帮我们做了一个字符串的转 ...

  7. DFS BFS代码

    #define maxnum 30 #include<bits_stdc++.h> int visited[maxnum]={0}; using namespace std; typede ...

  8. HTTP常用状态码大全

    HTTP状态码对照表 HTTP response codes 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码 ...

  9. Task执行内幕与结果处理解密

    本课主题 Task执行内幕与结果处理解密 引言 这一章我们主要关心的是 Task 是怎样被计算的以及结果是怎么被处理的 了解 Task 是怎样被计算的以及结果是怎么被处理的 Task 执行原理流程图 ...

  10. linux 里的`反引号

    Shell中可以将数字或字符直接赋予变量,也可以将Linux命令的执行结果赋予变量,如下: (1) $ count=9           #将数字赋予变量count (2) $ name=" ...