一.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. qt 样式表基本用法

    Qt样式表 QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界. 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用Q ...

  2. 跳过图片反盗链js

    页面增加<iframe> <iframe id="ifa" style="display:none" /> 原来html: <im ...

  3. 【OBJC】数字转中文大写

    博客园都不知道怎么外链图片…… - (void)numToString:(double)num{ ; NSMutableString *szChMoney = [[NSMutableString al ...

  4. 千里之堤毁于蚁穴（慎用HD Wallets）

    转自:http://blog.sina.com.cn/s/blog_12ce70a430102vbu9.html 千里之堤毁于蚁穴(慎用HD Wallets) -- 随机系列谈之四 现在我们都该明白, ...

  5. SpringMVC学习（一）——概念、流程图、源码简析

    学习资料:开涛的<跟我学SpringMVC.pdf> 众所周知,springMVC是比较常用的web框架,通常整合spring使用.这里抛开spring,单纯的对springMVC做一下总 ...

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

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

  7. SQL Server ->> 内置标量函数TRY_PARSE、TRY_CAST和TRY_CONVERT的各自特点和区别

    SQL Server到了目前的2014版本有三个函数是用来转换数据格式的.虽说之前版本中已经有CAST和CONVERT这两个函数来干这个事情.问题是,一旦往目标数据类型转换失败就会造成报错. TRY_ ...

  8. Useful WCF Behaviors - IErrorHandler

    Behaviors in WCF are so stinking useful, and once you get past the basics of WCF they're arguably a ...

  9. 常规渗透：没遇到过的anquan狗

    0x01 信息收集 服务器信息: windows 2003 + IIS 6.0 + aspx . Php + 安全狗 站点cms信息:一套aspx新闻发布系统 和 Discuz X3 端口信息 : 服 ...

  10. 关于Java中的反射的一个简单使用

    把以前在其他地方的技术文章重新整理一遍, 方便自己回忆, 也方便他人借鉴. 刚工作的时候发过这么一段代码: package cn.com.hanbinit.test; import java.lang ...