一.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. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    viewport:移动设备上用来显示网页的那部分区域,但其大小并不局限于那部分可视区域 width设置layout viewport  的宽度,为一个正整数,或字符串"device-widt ...

  2. 在Ubuntu14.10中部署Hadoop2.6.0单节点伪分布集群

    1. 环境信息如下: ubuntu:14.10 jdk:openjdk-1.7.0 hadoop:2.6.0 2. 下载hadoop2.6.0, http://apache.fayea.com/had ...

  3. 深入理解http协议的特点

    HTTP 是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点:1.支持客户/服务器模式:2.简单快速:3.灵活:4.无连接:5.无状态. 无连接 无连接的含义是限制每次连接只处理一个请求. ...

  4. Oracle IMPDP导入数据案例之注意事项（undo/temp）

    针对Oracle数据迁移,我们可能会用到expdp/impdp的方式,有时候需要大表.lob字段等可能会消耗过大的临时表空间和undo表空间,所以一般我们根据导出日志,在导入前适当调整表空间大小.否则 ...

  5. 架设Git服务器

    架设Git服务器项目 Git Candy:http://github.com/Aimeast/GitCandy/ AE大神的作品, Git Candy© 是一个基于ASP.NET MVC的Git分布式 ...

  6. Windows 编译 MQTT C++ Client

    MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可 ...

  7. yii2.0发送qq邮件详情配置

    首先要想使用qq发送邮件必须打开使用的qq邮箱里的一个配置,

  8. easyui学习笔记11—tab标签页和鼠标动作

    这篇我们看看标签页是怎么实现的,默认情况下要靠点击切换标签,也可以用鼠标切换标签选项,就是鼠标放在标签上切换. 首先看看引用的资源文件 1.资源文件 <head> <meta cha ...

  9. ZT 针对接口编程而不是针对实现编程

    java中继承用extends 实现接口用 implements 针对接口编程而不是针对实现编程 2009-01-08 10:23 zhangrun_gz | 分类:其他编程语言 老听说这句,不知道到 ...

  10. some language grammars

    ANSI C grammar Python grammar 怎么识别LL(1) LR(0) SLR(1) 等文法,一个不错的解答. http://stackoverflow.com/questions ...