react-筆記（1）

一、概念

    1）2013年5月發佈。

     2）React 把用戶界面抽象成一個個組件，如按鈕組件 Button、對話框組件 Dialog、日期組件 Calendar。開發者經過組合這些組件，最終獲得功能豐富、可交互的頁面。

     3）經過引入 JSX 語法，複用組件變得很是容易，同時也能保證組件結構清晰。

     4）有了組件這層抽象，React 把代碼和真實渲染目標隔離開來，除了能夠在瀏覽器端渲染到 DOM 來開發網頁外，還能用於開發原生移動應用。

 

---

二、特色

    1）聲明式設計      −React採用聲明範式

          聲明式是告訴計算機要去作什麼而無論怎麼作。

          命令式是要描述如何去作。

     2）高效     −React經過對DOM的模擬(虛擬dom)，最大限度地減小與DOM的交互。

     3）靈活    −React能夠與已知的庫或框架很好地配合。

     4）Jsx語法     − JSX 是 JavaScript 語法的擴展。(對比模版引擎)

     5）組件   − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

     6）單向響應的數據流    − React 實現了單向響應的數據流，這也是它爲何比傳統數據綁定更簡單。

 

---

三、專一視圖層

    1）React 並非完整的 MVC/MVVM 框架，它專一於提供清晰、簡潔的 View（視圖）層解決方案。

    2）與模板引擎不一樣，React 不只專一於解決 View 層的問題，又是一個包括 View 和 Controller 的庫。

    3）對於複雜的應用，能夠根據應用場景自行選擇業務層框架，並根據須要搭配 Flux、Redux、GraphQL/Relay 來使用。

    4）React 不像其餘框架那樣提供了許多複雜的概念與煩瑣的 API，它以 Minimal API Interface 爲目標，只提供組件化相關的很是少許的 API

    5）爲了保持靈活性，它沒有自創一套規則，而是儘量地讓用戶使用原生 JavaScript 進行開發。

 

---

四、Virtual Dom

    1、傳統dom更新：

        真實頁面對應一個 DOM 樹。在傳統頁面的開發模式中，每次須要更新頁面時，都要手動操做 DOM 來進行更新

 

 

    2、虛擬dom：

        1)  DOM 操做很是昂貴。在前端開發中，性能消耗最大的就是 DOM 操做，並且這部分代碼會讓總體項目的代碼變得難以維護。

         2) React 把真實 DOM 樹轉換成 JavaScript 對象樹，也就是 Virtual DOM

 

---

五、函數式編程-----react的精髓

    它屬於"結構化編程"的一種，主要思想是把運算過程儘可能寫成一系列嵌套的函數調用。

    函數編程式的好處：

        1）代碼簡潔，開發速度快

        2）接近天然語言，易於理解

        3）更方便代碼管理

        4）易於「併發編程」

        5）代碼的熱升級

 

---

六、JSX語法

    1）JSX 將 HTML 語法直接加入到 JavaScript 代碼中，再經過翻譯器轉換到純 JavaScript 後由瀏覽器執行。

    2）編譯過程由Babel 的 JSX 編譯器實現。

    3）JSX 的官方定義是類 XML 語法的 ECMAScript 擴展。

    4）它完美地利用了 JavaScript 自帶的語法和特性，並使用你們熟悉的 HTML 語法來建立虛擬元素。

 

---

    一、XML基本語法

        定義標籤時，只容許被一個標籤包裹。標籤必定要閉合。

    二、元素類型

        1）小寫首字母對應 DOM 

        2）元素大寫首字母對應組件元素 

        3）註釋使用js註釋方法

    三、元素屬性

        1）class 屬性改成 className

        2）for 屬性改成 htmlFor

        3）Boolean 屬性：省略 Boolean 屬性值會致使 JSX 認爲 bool 值設爲了 true

    四、JavaScript 屬性表達式

        屬性值要使用表達式，只要用 {} 替換 「」 便可

        eg：

               <input type="text" value={val ? val : ""} />

    五、HTML 轉義

        1）React 會將全部要顯示到 DOM 的字符串轉義，防止 XSS。

        2）後臺傳過來的數據帶頁面標籤的是不能直接轉義的

        3）具體轉義寫法：

            var content='<strong>content</strong>';                                     React.render(     

                <div dangerouslySetInnerHTML={{__html: content}}>                    </div>,     

                    document.body 

             );

        4）ReactDOM.render

                做用：描畫dom

                參數1：dom對象

                參數2：注入點

                參數3：回調函數（渲染是否成功）

                 eg：

                        ReactDOM.render(  

                            <div>Hello World!</div>,                     document.querySelector('#wrapper')

                            ()=>{  console.log("渲染成功") }

                         );

         5）React.createClass

                做用：聲明組件

                render方法：

                render: function(){       

                     return (            

                         <input type="button"  value="hello world!!!!" />                       )     

                 }