一.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. 系统变量 %USERPROFILE%

    可以用CMD的SET命令来查看现有的系统变量,“="前的部分用%括起来就是.   常用: %USERPROFILE% =C:\Users\用户名 %SystemRoot% =C:\WINDO ...

  2. C++中精确到小数点后任意位

    #include <iostream> #include <iomanip> //用setprecision(n)设置精度,其中n表示精确到小数点后n位 using names ...

  3. Ganglia安装

    一.rrdtool安装 1.1 安装依赖包 由于rrdtool依赖的包比较多,而且包之间也存在依赖,故使用yum安装由于服务器无法联网,故使用iso文件创建本地yum源,方法见下: (1)创建iso存 ...

  4. DELPHI SOKET 编程--使用TServerSocket和TClientSocket

    本文采用delphi7+TServerSocket+TClientSocket; 笔者在工作中遇到对局域网中各工作站与服务器之间进行Socket通信的问题.现在将本人总结出来的TServerSocke ...

  5. vscode：解决操作git总让输入用户名及密码问题

    只要是使用git操作,不管是同步,拉去,克隆,vscode总让我们输入用户名及密码,是一件很繁琐的事情 我们打开终端,会看到cmd定位在我们仓库位置,我们只要添加:git config --globa ...

  6. Types of Computer Systems

    Types of Computer Systems Para 1 You should be familiar with the differences among computer systems ...

  7. OC NSArray使用

    #import <Foundation/Foundation.h> #import "Student.h" #pragma mark 创建一个数组 void array ...

  8. 获取Spring管理的Bean

    1.再Spring配置文件中配置工具类 <!-- 用于持有ApplicationContext,可以使用SpringContextHolder.getBean('xxxx')的静态方法得到spr ...

  9. SP34096 【DIVCNTK - Counting Divisors (general)】

    题目 求 \[\sum_{i=1}^n \sigma(i^k)\] 我们先来设一个函数\(f(i)=\sigma(i^k)\) 根据约数个数定理 \[f(p)=\sigma(p^k)=k+1\] \[ ...

  10. 20145223 杨梦云 《网络对抗》 MSF基础应用

    20145223 杨梦云 <网路对抗> MSF基础应用 1.实验后回答问题:用自己的话解释什么是exploit,payload,encode (1)百度百科上说Exploit 的英文意思就 ...