【天天半小時學框架】——React.js的模板語法與組件概念

       【 重點提早說：組件化與虛擬DOM是React.js的核心理念！】

       先拋出一個論題：在React.js中，JSX語法提倡將 HTML 和 CSS 全都寫入到JavaScript 中是代碼書寫規範中的"資本主義復辟」嗎？ react值得推薦的地方就是組件和virtualdom，前者解決多團隊協做複雜前端的問題，後者使dom操做到視圖刷新變得現實。對於React.js你們褒貶不一，腦殘粉極力捧吹，而黑粉則是一昧的踩低。既然這樣，那咱們就本身學習使用，來下個定論吧~

---

1、學習前，你該知道這些有關的基礎知識~

---

1、什麼是React.js
                React 是一個用於構建[用戶界面]的 JAVASCRIPT 庫，t主要用於構建UI，不少人認爲 React 是 MVC 中的 V（視圖）。
                React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
 2、React有哪些 特色？
              ● 1.聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。
              ● 2.高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。--虛擬DOM結構
              ● 3.靈活 −React能夠與已知的庫或框架很好地配合。
              ● 4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。
              ● 5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。
              ● 6.單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單
3、簡單的解釋幾個概念：
              ① 虛擬DOM（Virtual DOM）機制：對於每個組件，React會在內存中構建一個相對應的DOM樹，
                          基於React開發時全部的DOM構造都是經過虛擬DOM進行，每當組件的狀態發生變化時，React都會從新構建整個DOM數據。
                          而後將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，而後將這些Patchs再更新到
                          真實DOM中。     
                     優勢：避免了當頁面數據發生變化時，DOM也被所有更新一遍並進行從新渲染。
                                 整個過程都是在內存中進行，減小了沒必要要的性能開銷，所以是很是高效的。   
              ② JSX語法：
                      定義：JSX=JavaScript XML，是一種在React組件內部構建標籤的類XML語法。
                             React在不使用JSX的狀況下同樣能夠工做，可是使用JSX能夠提升組件的可讀性，加強JS語義，結構清晰，抽象程度高，代碼模塊化。
                      特色：
                      一、元素名首字母大寫
                      二、符合嵌套規則
                      三、能夠寫入求值表達式
                      四、駝峯式命名
                      五、不能使用javascript原生函數的一些關鍵詞，如for和class。須要替換成htmlFor和className
                      六、HTML語言直接寫在 JavaScript 語言之中，不加任何引號，它容許 HTML 與 JavaScript 的混寫.。
                      優勢：
                     一、JSX 執行更快。
                     二、它是類型安全的，在編譯過程當中就能發現錯誤。
                     三、使用 JSX 編寫模板更加簡單快速。
              ③ JSX 的基本語法規則：
                                                      遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；
                                                  遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析；
            
4、 React.js/Angular.js/Vue.js的對比
            一、數據流(數據綁定)
                ① Angular 使用雙向綁定即：界面的操做能實時反映到數據，數據的變動能實時展示到界面。
                ② Vue 也支持雙向綁定，默認爲單向綁定，數據從父組件單向傳給子組件。
                ③  React推崇的是函數式編程和單向數據流
                         即給定原始界面（或數據），施加一個變化，就能推導出另一個狀態（界面或者數據的更新）。
             二、視圖渲染
                ① AngularJS的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入
                                                          (NG框架是在DOM加載完成以後, 纔開始起做用的)
                ② React 的渲染創建在 Virtual DOM 上，一種在內存中描述 DOM 樹狀態的數據結構。
                                    當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。
                ③ Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板，數據綁定到真實節點。
                
             三、模塊化與組件化
                 ① Angular 依賴注入來解決模塊之間的依賴問題
                 ② Vue.js  指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯操做。
                 ③ React構建於組件之上，重要屬性props,state。一個組件就是經過這兩個屬性的值在 render 方法裏面生成這個組件對應的 HTML 結構。
             四、語法與代碼風格
                  ①Angular 2 依然保留以 HTML 爲中心。Angular 2 將 「JS」 嵌入 HTML。
                  ② Vue.js  Vue 也是以 HTML 爲中心，將 「JS」 嵌入 HTML，可是進階以後推薦的是使用 webpack + vue-loader 的單文件組件格式。
                  ③ React 推薦的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript

---

2、React.js的模板語法

---

1、文件導入

JS文件能夠到 官網進行下載：

        <script src="js/react.js"></script>
        <script src="js/browser.min.js"></script>
        <script src="js/react-dom.js"></script>

這裏須要注意的是這三個文件必須首先加載！而且react.j文件要放在最前面進行導入！ react.js是react.js的核心庫。  react-dom.js提供與DOM相關的功能。而 browser.js是將JSX語法轉化爲JAVASCRIPT語法。

2、模板語法

在文件的body區域，咱們只須要寫一個簡單的DIV ，給它一個ID便可。

以後建立script標籤，咱們的核心JSX語法就寫在標籤內部：

這裏須要注意的地方是：<script> 標籤的 type 屬性爲 text/babel 。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

tips:    在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js   在react 0.14後，這個依賴的庫改成browser.js。 頁面script標籤的type也由text/jsx改成text/babel。

接下來咱們寫一個簡單的小案例，利用React.js打印輸出語句，代碼以下：

 <script type="text/babel">
        /*1、基本結構：
         ReactDOM.render() 是react中的最基本的方法，做用是將模板轉爲HTML語言，並將其插入到DOM節點中。
        */
          ReactDOM.render(//render:渲染的意思
              <h1>你好，React!</h1>,
             //必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點；
              document.getElementById("example1")
              )
  </script>

使用上面語句就能夠打印輸出語句「你好，React!」，這就實現了簡單的案例。

      

接下來咱們介紹一下，React.js中的CSS樣式書寫方式，與原生分離式寫法有很大不一樣：

① React 推薦使用內聯樣式！(使用小駝峯法則)
② React 會在指定元素數字後自動添加 px 。

 <script type="text/babel">
             var myStyle ={ //傳入一個樣式數組
                fontSize: 100,
                color: 'red'
            };
             var testStyle ={ 
                width:800,
                heigth:500,
                backgroundColor:"yellow"
            };
        ReactDOM.render(
            <div style = {testStyle}>
             <h1 style = {myStyle}>這段文字使用了內聯樣式</h1>
             </div>,
             document.getElementById('example')
        )
  </script>

顯示效果以下：

接下來咱們在模板插入 JavaScript 變量，以數組爲例，看一下會是什麼效果?

 <script type="text/babel">
       var arr = [
          <h1 key="1">這是數組元素1</h1>,
          <h2 key="2">這是數組元素2</h2>,
          <h3 key="3">這是數組元素3</h3>,
          ];
       ReactDOM.render(
                <div>{arr}</div>,
              document.getElementById("example")
          )
                
  </script>

代碼的運行結果以下：

以上咱們能夠看到JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員。

---

3、React.js中的組件

---

 1、什麼是組件？

組件化思想在React.js中很重要，eact 容許將代碼封裝成組件，而後像插入普通 HTML標籤同樣，在網頁中插入這個組件。

2、組件的建立以及輸出

 建立：
 var HelloMessage = React.createClass({
                          render:function (){
                                 return
                                                 }
                                     })
  輸出：使用僞標籤 實例化組件類並輸出信息   <HelloMessage /> 

下面咱們建立一個組件來實現一個簡單的功能：

 <script type="text/babel">
         var HelloMessage = React.createClass({
            render: function() {
            return <h1>這是一個自定義組件---{this.props.name}---{this.props.age}</h1>
//                        <p>這是個測試標籤</p>;
          }
        });
 //輸出組件
         ReactDOM.render(
            
         <HelloMessage name = "這是組件的name屬性！"   age = "這是組件的age屬性！"/>,
            //在調用組件的時候，若是想要屢次調用組件，也須要給組件設置一個根標籤
         <div>
              <HelloMessage name="這是組件的name屬性！" />
              <HelloMessage age="這是組件的age屬性！" />
              </div>，
           document.getElementById('example')
        );  
  </script>

上面代碼運行結果以下：

在上述代碼中，若是咱們將 <p>這是個測試標籤</p> 放開控制檯會報錯以下：

緣由是由於組件類只能包含一個頂層標籤(根標籤)，能夠嵌套標籤例如咱們能夠將上述組件類寫成以下格式：

        var HelloMessage = React.createClass({
           render: function() {
            return <h1>
                        這是一個自定義組件---{this.props.name}---{this.props.age}
                        <p>這是個測試標籤</p>
                        </h1>
         }
        }); 

運行時就不會再報錯，結果以下所示：

在聲明與調用組件的時候咱們須要注意如下幾點：

注意：
     ① 自定義的 React組件類名以大寫字母開頭，使用大駝峯法則命名！
     ② 全部的組件都必須擁有本身的render！
   ③ 組件類只能包含一個頂層標籤(根標籤)，能夠嵌套標籤！
     ④ 組件能夠任意加入屬性，其屬性屬能夠在組件類的 this.props.對象上獲取。(組件的全部子節點)
        Tips: 在添加屬性時，
               class 屬性須要寫成 className ，
                for 屬性須要寫成 htmlFor ，
               這是由於 class 和 for 是 JavaScript 的保留字

複合組件：建立多個組件來合成一個組件，即把父組件的不一樣功能點進行分離

 <script type="text/babel">
          var BaseModule = React.createClass({
                render:function(){
                    return(
                        <div>
                           <Module title={this.props.title} />
                          {/* <h2>做品:{this.props.title}</h2>*/}
                           <p>做者:{this.props.author}</p>
                        </div>
                    )
                }
             });
             var Module = React.createClass({
                render:function(){
                    return(
                        <h2>{this.props.title}</h2>
                    )
                }
            });
            ReactDOM.render(
                <BaseModule title="圍城" author="錢鍾書" />,
                document.getElementById('container')
            );
   </script>

上述複合組件運行結果以下：

---

好了。第一篇React的介紹就先這麼多了，經過這些實例咱們也大體瞭解了React所謂混寫的概念以及其便捷性，和Vue等框架孰優孰劣如今還不能太早下定論，在之後的幾篇文章裏咱們將會更深一步的瞭解下它們的異同再作比較。