react系列---------React簡介（1）

React 簡介：

React 是一個用於構建用戶界面的 JAVASCRIPT 庫。

React 主要用於構建UI，不少人認爲 React 是 MVC 中的 V（視圖）。

React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯很是簡單，愈來愈多的人已開始關注和使用它。

 

React誕生的緣由

　　主要是當時市面上的這些框架都沒法知足 facebook 公司的業務需求 (1. 數據量很大，數據很差管理 2. 頁面DOM結構不能好複用)

facebook 內部工程師 想辦法去解決這些需求，經過努力，找到解決方案，開源了 react。

 

筆試題： 談談react最顯著的特色？

1.flux 統一管理數據的思想（高階）

2.虛擬DOM概念（virtual DOM）：使用js對象的方式去描述一個真實的DOM元素，在後面數據變化後，讓生成的新的虛擬DOM和舊的虛擬DOM，是 diff 算法進行比較，得出差別(patch)，而後把 patch 更新到頁面上。

3.組件化：能夠複用的代碼提取出來，造成一個單獨的結構。（1. 結構html標籤 2. 樣式 3. 造成 4. 數據state）

 

附：

首次引入虛擬DOM 概念（主要的緣由是，在前端沒有引入MVC概念的時候，在jQuery存在的哪一個年代，你們都是DOM操做，經過DOM監聽，DOM選取操做，若是操做量不大，也不會產生太大的問題，可是業務一旦複雜，數據量多，則這個時候若是繼續DOM操做，仍是很消耗性能，瀏覽器的底層是作渲染和重繪是很消耗性能，咱們應該儘量減小重繪。主要的緣由是由於在開發的時候，有的時候，只有部分的數據發生變化，其實頁面上主要的DOM結構尚未太大的變化，不少的DOM均可以複用）Facebook的工程師引入 虛擬DOM（使用javascript對象的方式去描述一個DOM結構，而後經過diff算法去比較新的虛擬DOM和舊的虛擬DOM，得出區別（patch 補丁） snabbDOM h函數 patch）。 注意：因爲虛擬DOM的引入使得頁面的加載性能獲得顯著的提高，以致於後面的一些其餘的MVVM框架，都引入虛擬DOM的概念。例如 vuejs 就是借鑑了 react 裏面的 虛擬DOM（virtual DOM）注意： 虛擬DOM的概念是Facebook的工程師想出來的。可是 底層 diff 算法不是Facebook獨創，很早有了 diff 算法。

 

React解決了什麼問題？

1. 數據統一管理 2. 性能提高 3. 代碼複用

 

jsx語法

什麼是jsx語法？

        jsx 翻譯過來就是 javascript + xml。說白了就是容許開發者能夠在 js 語境下直接寫 html 代碼（標籤），不須要使用引號包裹。

爲何引入jsx語法？

 答：咱們react引入虛擬DOM，可是使用react原生的  api 實現虛擬DOM，太麻煩了 React.CreateElement(tagName, tagAttr, tagContent)。 引入一種新的語法 jsx（javascript + xml） 說白了：能夠在js語境下寫 html 代碼（其底層的緣由是使用webpack調用babel 進行轉換）。咱們把jsx語法寫的代碼，稱之爲：jsx元素，jsx代碼，react元素。

  jsx好處：方便開發者。

參考網址：https://zh-hans.reactjs.org/docs/introducing-jsx.html

 

庫和框架有什麼區別？（談談庫和框架之間的區別？）

            jquery 這個是一個庫；vuejs 是一個框架。 簡單：庫只是一個工具集合（裏面封裝不少的好用的函數、方法）。框架是一套成熟的解決方案（框架裏面能夠組織不少的庫）。 vuejs 數據驅動，沒有DOM操做（vuejs底層仍是要DOM操做，尤大大把底層DOM操做封裝起來）。

 

 

React的組件：

 

什麼是組件？　　組件說白了就是之後自定義的HTML代碼片斷（可能會高度複用的代碼，提取出來，造成一個公共的代碼塊，能夠複用）

組件的特色：         1. html結構（屬性）render       2. 樣式      3. 行爲       4. 數據(1. props 2. state

爲何要學習組件？        實現代碼的複用。

如何學習組件？               在 react 裏面組件分爲兩類（ 1. 函數式組件（無狀態） 2. 類組件（有狀態 state、無狀態 ））

 

組件的分類：

1.函數式組件 ：  定義一個構造函數，而後函數首字母大寫，其次返回值必須是一個合法jsx 元素。而且咱們把函數組件也叫無狀態的組件。

2.類組件 ： 使用es6裏面提供的class 關鍵字去定義一個類，可是這個類必須遵循兩點（繼承React Component 父類   必須定義render方法 ）。類組件若是存在state屬性，則被稱爲有狀態的組件，若是沒有state屬性，則被稱爲無狀態組件。

 

 函數式組件

　　使用構造函數的方式去編寫一個組件。

　　1.構造函數的首字母必須大寫

　　2.函數的返回值是一個jsx 表達式

　　語法格式

function MyCompoent(){
    return (
        <div>
            ....
        </div>

    )
}

　　

   類組件

      使用class關鍵字去定義一個組件，這個組件叫作類組件。

  class 這個關鍵字是 es6 引入的語法糖，其實就是對構造函數的一個封裝。在其餘的面嚮對象語言裏面，class 關鍵是定義一個類。

  extends 關鍵字是 es6 裏面引入一個新的特性，能夠實現類的繼承。解決es5裏面的原型鏈的繼承問題。

注意  ： 在 react 裏面若是要使用類組件，則該組件必須先繼承react提供的一父組件。React.Component

注意  ：   類組件必須定義一個 render 方法。返回的返回值是一個 jsx 表達式

      語法：

class MyDiv extends React.Component {

    render(){
        return (
            <div>
                .....
            </div>
        )
    }
}

 

       組件的樣式：

1.行內樣式style     給行內的 style 屬性的屬性值應該是一個對象。傳遞的時候是一個 {{color: 'red' }} 第一個大括號，表明定義一個js語境，第二個大括號表明傳遞的是一個對象。

2.class類名         （注意：html裏面咱們可使用class定義類名，可是在js語境下 class 是關鍵字，不能隨便用，則咱們把樣式的類名換成 className）只須要在組件內部經過 import 方式直接導入一個外部的css文件。（腳手架的底層使用css-loader解決css依賴）

 

     屬性的傳遞：

       有的時候，咱們但願在外部能夠給組件傳遞一點數據，則咱們稱爲屬性傳遞，在調用方經過屬性的方式傳遞數據便可。在組件這邊若是是構造函數組件，則咱們能夠經過構造函數的形參來接受傳遞的數據（形參名稱通常使用 props，翻譯過來就是屬性。）若是咱們的組件是類組件，則咱們能夠經過 this.props 屬性獲取傳遞過來的屬性信息，同時若是咱們的類組件定義 construtor 構造方法，則咱們的構造方法也能夠接受一個參數 props，表明調用方給組件傳遞的屬性。

 

　組件的行爲：

行爲就是咱們所說的事件，在原生js當中，事件綁定有三種：

1.行內綁定   

2.外部綁定     document.getElementById('btn').onclick = function(){}

3.事件監聽     document.getElementById('btn).addEventListen('click', fn, false);

注意：：可是在React裏面只支持行內綁定。

在React 綁定事件  ：1. 事件的名稱必須大寫，on事件類型(onClick onChange)

　　　　　　　　　  2.事件的回調函數必須是一個函數，這個注意（1. event 2. this指向問題）

 

 

 React 的 使用：

          react 的使用須要使用一個官方提供的腳手架進行開發。不像vuejs 直接引入一個 vue.js 文件就可使用。腳手架的底層使用的 webpack，把 react 裏面的一些新特性寫的代碼作了轉換，轉換成瀏覽器能夠識別的代碼，例如 react 引入一種叫作 jsx 的語法。

npm init -y
npx create-react-app my-app
cd my-app
npm start
注意1 ：npx 表明是局部安裝後面的腳手架 
create-react-app

腳手架提供的經常使用的命令

yarn start 用於在本地啓動一個測試服務器：3000端口
yarn build 用於打包，打包後的文件能夠直接上線
yarn test  用於前端測試
yarn eject 用於把 webpack 配置文件導出（create-react-app 底層就是 webpack

 

 擴展閱讀：：

1. https://blog.csdn.net/hhthwx/article/details/80071056
2. https://www.jianshu.com/p/ad533d71f79e
3. http://www.javashuo.com/article/p-xalnpppf-k.html