react基本demo詳解

時間 2019-11-18

標籤 react 基本 demo 詳解欄目 React 简体版

原文原文鏈接

一.react的優點javascript

一、React速度很快：它並不直接對DOM進行操做，引入了一個叫作虛擬DOM的概念，安插在javascript邏輯和實際的DOM之間，性能好。html

二、跨瀏覽器兼容：虛擬DOM幫助咱們解決了跨瀏覽器問題，它爲咱們提供了標準化的API，甚至在IE8中都是沒問題的。前端

三、一切都是component：代碼更加模塊化，重用代碼更容易，可維護性高。
vue

四、單向數據流：Flux是一個用於在JavaScript應用中建立單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。java

五、同構、純粹的javascript：由於搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化(SEO)。react

六、兼容性好：好比使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務再也不讓人望而生畏。jquery

二.demo詳解git

廢話少說，直接上代碼:github

<!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}));則爲失敗的回調函數。-->

總結：api

前端框架層出不窮，不過萬變不離其宗，就是從MVC過渡到MVVM。從數據映射到DOM，angular中用的是watcher對象，vue是觀察者模式，react就是state了。

1. react基本demo詳解
2. React基礎入門詳解
3. Three.js基本 Demo
4. tensorflow word2vec demo詳解
5. node-red詳解demo
6. Log4j詳解及demo
7. React-Hooks(附demo)
8. react dnd demo
9. react-navigation NestingNavigators Demo
10. webstorm+react+webpack-demo
更多相關文章...
• 免費ARP詳解 - TCP/IP教程
• Lua 基本語法 - Lua 教程
• Kotlin學習（二）基本類型
• Kotlin學習（一）基本語法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。