一.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. 是否应该开启WebView硬件加速？

    android webview 在3.0+后显示flash要启用硬件加速,开启硬件加速也能够使绘制更加平滑. 开启硬件加速是在manifest中加入: android:hardwareAccelera ...

  2. intellij-maven-imports-have-broken-classpath

    公司自己搭得maven私服,然后使用git下载 公司mvn的依赖包时候,报错: 之后再idea里面发现依赖的jar包 有红色的错误信息,提示 maven imports have broken cla ...

  3. 深入理解mysql的底层实现

    MySQL 的常用引擎 1. InnoDB InnoDB 的存储文件有两个,后缀名分别是 .frm 和 .idb,其中 .frm 是表的定义文件,而 idb 是数据文件. InnoDB 中存在表锁和行 ...

  4. 【NLP_Stanford课堂】文本分类1

    文本分类实例:分辨垃圾邮件.文章作者识别.作者性别识别.电影评论情感识别(积极或消极).文章主题识别及任何可分类的任务. 一.文本分类问题定义: 输入: 一个文本d 一个固定的类别集合C={c1,c2 ...

  5. 如何让LoadRunner实现多个场景运行？

    如何让LoadRunner实现多个场景运行? 发布时间: 2013-11-29 10:59    作者: stevenlee    来源: 51Testing软件测试网博客 字体:  小  中  大  ...

  6. MVC5中Model设置属性注解

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  7. RMAN备份等级详解

    (2011-06-27 11:38:28) 转载▼ 标签: 杂谈 分类: oracle 在rman增量备份中,有差异增量和累积增量的概念 1.概念 差异增量:是备份上级及同级备份以来所有变化的数据块, ...

  8. Yii中的relations方法

    以Blog示例: 重点看注释 User类中的relations方法如下 <span style="font-size:18px;background-color: rgb(255, 2 ...

  9. [转] 从此不再惧怕URI编码：JavaScript及C# URI编码详解

    混乱的URI编码 JavaScript中编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码主要方法:HttpUtility.UrlEncode.Serv ...

  10. 转：git 的常用命令

    转自:阮一峰 常用git命令清单 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Wor ...