react基本demo详解

一.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了。

猜你喜欢