初始react

時間 2019-11-10

標籤初始 react 欄目 React 简体版

原文原文鏈接

　　好久就期待學習react了，惰性，一直都沒有去翻閱react的資料，最近抽空，簡單的瞭解了一下react，先記錄一下，後續慢慢的學習。javascript

1、ReactJS簡介

　　React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。html

　　ReactJS官網地址：http://facebook.github.io/react/前端

　　Github地址：https://github.com/facebook/reactjava

2、ReactJS特色

　　React 的核心思想是：封裝組件。react

　　各個組件維護本身的狀態和 UI，當狀態變動，自動從新渲染整個組件。
　　基於這種方式的一個直觀感覺就是咱們再也不須要不厭其煩地來回查找某個 DOM 元素，而後操做 DOM 去更改 UI。基於這些概念：組件，JSX，Virtual DOM，Data Flowwebpack

　　組件git

　　React 應用都是構建在組件之上。
　　上面的 HelloMessage 就是一個 React 構建的組件，最後一句 render 會把這個組件顯示到頁面上的某個元素 mountNode 裏面，顯示的內容就是 <div>Hello John</div>。
props 是組件包含的兩個核心概念之一，另外一個是 state（這個組件沒用到）。能夠把 props 看做是組件的配置屬性，在組件內部是不變的，只是在調用這個組件的時候傳入不一樣的屬性（好比這裏的 name）來定製顯示這個組件。+es6

　　JSXgithub

　　從上面的代碼能夠看到將 HTML 直接嵌入了 JS 代碼裏面，這個就是 React 提出的一種叫 JSX 的語法，這應該是最開始接觸 React 最不能接受的設定之一，由於前端被「表現和邏輯層分離」這種思想「洗腦」過久了。但實際上組件的 HTML 是組成一個組件不可分割的一部分，可以將 HTML 封裝起來纔是組件的徹底體，React 發明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種很是聰明的作法，讓前端實現真正意義上的組件化成爲了可能。
　　好消息是你能夠不必定使用這種語法，後面會進一步介紹 JSX，到時候你可能就會喜歡上了。如今要知道的是，要使用包含 JSX 的組件，是須要「編譯」輸出 JS 代碼才能使用的，以後就會講到開發環境。web

　　Virtual DOM

　　當組件狀態 state 有更改的時候，React 會自動調用組件的 render 方法從新渲染整個組件的 UI。
固然若是真的這樣大面積的操做 DOM，性能會是一個很大的問題，因此 React 實現了一個Virtual DOM，組件 DOM 結構就是映射到這個 Virtual DOM 上，React 在這個 Virtual DOM 上實現了一個 diff 算法，當要從新渲染組件的時候，會經過 diff 尋找到要變動的 DOM 節點，再把這個修改更新到瀏覽器實際的 DOM 節點上，因此實際上不是真的渲染整個 DOM 樹。這個 Virtual DOM 是一個純粹的 JS 數據結構，因此性能會比原生 DOM 快不少。

　　Data Flow

　　「單向數據綁定」是 React 推崇的一種應用架構的方式。當應用足夠複雜時才能體會到它的好處，雖然在通常應用場景下你可能不會意識到它的存在，也不會影響你開始使用 React，你只要先知道有這麼個概念。

　　注意，這四類，咱們使用時類名必須大寫。

3、ReactJS簡單例子

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/jsx">
      var mountNode = document.getElementById("container");
      var HelloMessage = React.createClass({
          render: function() {
            return <div>Hello {this.props.name}</div>;
          }
        });

        React.render(<HelloMessage name="John" />, mountNode);
    </script>
  </body>
</html>

　　jsx編譯後出現（React部分）：

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

　　JSXTransformer.js是來編譯jsx的，jsx與js不兼容，因此咱們要在script標籤裏面加text/jsx，已示區別，因爲babel.js能更好的是將 JSX 語法轉爲 JavaScript 語法（也能夠把ES6轉換爲ES5）。編譯轉換，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

　　安裝babel

npm install -g babel  babel-cli

　　轉換：

$ babel src --out-dir build

　　上面命令能夠將 src 子目錄的 js 文件進行語法轉換，轉碼後的文件所有放在 build 子目錄。

　　例子還有還有一種寫法：經過browser.js將jsx語法轉換爲javascript語法。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

　　上面代碼有兩個地方須要注意。首先，最後一個 <script> 標籤的 type 屬性爲 text/babel 。這是由於 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
　　其次，上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的做用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

　　參考學習資料：

　　也許，DOM 不是答案（解釋dom致使了web頁面性能低下）

　　React 入門實例教程

　　React中文官網api

　　React中文api(非官網)

　　基於ES6，使用React、Webpack、Babel構建模塊化JavaScript應用

　　babel中文編譯示例

　　gulp入門+ES6

　　react-demos

　　React官方JSX 語法

　　Babel 在線工具

　　React.cn中文