對React的三大特性實戰的深入了解與運用心得

​

React的三大特性

聲明式程式設計

指令式程式設計與聲明式程式設計：

簡而言之，指令式程式設計是告訴計算機通過代碼做什麼。

聲明式程式設計是通過代碼告訴計算機你想做什麼，這樣計算機就可以知道怎麼做。

生活中的一個例子是：

指令程式設計：我想喝一杯冰可樂，然後我會對我周圍的XXX說：“XXX，去廚房，打開冰箱，拿出一瓶冰可樂，打開并寄給我。”

聲明式程式設計：我想喝一杯冰可樂，然後我會對我周圍的XXX說：“XXX，我想喝杯冰可樂。”我不在乎他是如何得到冰可樂的，他是如何發送的，他到底是在樓下買的還是放在冰箱裡的。我隻關心我對冰可樂的需求是否滿足。

以代碼為例：

const container = document. getElementById ( "container" );
const btn = document.createElement ("button");

btn.className = "btn red " ;
btn.textContent = "Demo" ;

btn.onclick = function ( ) {
    if ( this.classList.contains ( "red" ) ) {
        this.classList.remove( "red" );
        this.classList.add ( "blue" );
    }else {
    this.classList.remove( "blue" );
    this.classList.add ( "red" );
    }
};
container.appendChild( btn);      

如果我想在界面上顯示一個按鈕，然後單擊該按鈕，按鈕的類将被更改。

Dom程式設計編寫的代碼是指令式程式設計：首先，需要指令浏覽器。第一步是找到ID為容器的節點，然後建立一個按鈕元素，然後向按鈕添加一個類名，然後添加一個單擊事件，最後将按鈕添加到容器節點。整個過程的每一步都是必不可少的，一步一步地告訴浏覽器該做什麼。

class Button extends React. Component {
    state = { color: "red" };
    handleChange =()=> {
        const color = this.state.color == "red" ? "blue" : "red" ;this.setState({ color });
    };
    render( ) {
        return (
        <div id="container">
            <button
                className={ `btn ${this.state.color}` }
                onclick={this.handleChange}
            >
                Demo
            </button>
        </div>
     );
    }
}      

為了實作相同的功能，使用聲明式程式設計進行react要簡單得多。

首先，我們定義一個按鈕元件。在render函數中，通過傳回類似于HTML的資料結構，我們告訴react我想要呈現一個按鈕，它是一個具有ID容器的子節點。按鈕上的類名會動态更改。單擊按鈕時，類将更改。這就是全部。至于何時執行渲染，如何将其渲染到頁面，以及單擊按鈕後如何更新類名，您無需關心。您隻需要告訴react您希望目前UI處于何種狀态。

元件化

React提供了一個新的文法擴充JSX。JSX創造性地結合了呈現邏輯和UI邏輯，這種組合在react中稱為元件。一個頁面由多個元件組成，甚至整個應用程式都可以被視為一個元件，它隻是最大的元件。元件可以逐層嵌套。一個元件可以由多個元件組成。大部件由許多小部件組成，這些小部件也可以由較小部件組成。同一部件可用于不同的地方。

一次學會，随處編寫

這句話的意思不是說你可以寫你想寫的東西，也不是說你想寫一次就可以在任何地方運作，而是說你可以使用react文法在很多地方編寫代碼，比如用react DOM編寫網頁，用react native編寫移動用戶端應用，用React360開發VR界面。

react的靈活性取決于其自身的定位。React是一個用于建構使用者界面的JS庫。對于react，這裡的使用者界面是一個抽象的虛拟使用者界面，實際上是一個描述頁面狀态的資料結構。網頁、移動用戶端頁面和VR界面都是使用者界面。隻要使用相應的渲染器，就可以在不同的平台上顯示正确的UI界面。

一般來說，我們可以将react的執行結果想象為視訊檔案資料。在不同的播放器裝置中，我們通過轉換器将視訊編譯成不同的格式，讓它們在不同播放器上正常播放。是以，在web端編寫react時，我們需要另外引入react DOM來進行渲染。

虛拟DOM的建立

建立虛拟DOM的兩種方法

純JS模式（通常不使用，太麻煩）

JSX模式（簡單友善，最終由Babel翻譯成JS，與JS編寫的結果相同）

虛拟Dom和真實Dom

React提供了一些API來建立一個“特殊”通用JS對象

const VDOM = React.createElement('xx',{id:'xx'},'xx')///依次為标簽名，标簽屬性和标簽内容      

在編碼時，我們隻需要操作react的虛拟DOM相關資料，react就會轉換成真實的DOM

虛拟DOM概述：

本質上為object類型的對象（一般對象）

虛拟DOM是“輕”的，而真實DOM是“重”的，因為虛拟DOM在react中内部使用，并且不需要在真實DOM上有太多屬性

虛拟DOM對象最終将通過react轉換為真實DOM，并顯示在頁面上

子產品與元件，子產品化與元件化的了解

子產品

了解：外部提供特定功能的JS程式通常是JS檔案

為什麼拆分為子產品：因為随着業務邏輯的增加，代碼變得越來越複雜

功能：取JS，簡化JS編寫，提高JS運作效率

元件

了解：用于實作本地函數（HTML/CSS/JS/image等）的代碼和資源的集合

為什麼一個接口的功能如此複雜，以至于不可能将其寫在一塊中？它應該寫成碎片，然後放在一起

功能：重用編碼，簡化項目編碼，提高營運效率

子產品化

當一個應用的js都是以子產品來編寫，這個應用就是一個子產品化的應用

元件化

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}      

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}      

myRef = React.createRef() ;
<input ref={this.myRef}/>