react redux學習之路

React 自學

chapter one React新的前端思惟方式

React的首要思想是經過組件(Component)來開發應用。所謂組件，簡單說，指的是可以完成某個特定功能的獨立的、可重用的代碼。

基於組件的應用開發是普遍使用的軟件開發模式，用分而治之的方法，把一個大的應用分解成若干的小組件，每一個組件只關注某個小範圍的特定功能，可是把組件組合起來，就能構成一個功能龐大的應用。若是分解功能的過程足夠巧妙，那麼每一個組件能夠在不一樣場景下重用，那樣不光能夠構建龐大的應用，還能夠構建出靈活的應用。打個比方，每一個組件是一塊磚，而一個應用是一座樓，想要一次鍛造就構建一座樓是不現實的。實際上，老是先鍛造不少磚，經過排列組合這些磚，才能構建偉大的建築。

React很是適合構建用戶交互組件。

jsx 是進步仍是退步？

多年來，業界一直流行三次分離，即html(結構)、css(表現)、js(邏輯)分離，通常會寫在不一樣的文件之中。
而jsx把相似HTML的標記語言和javascript混在一塊兒了，可是，隨着時間的推移，業界分離的認識有了改變，將html,css,js這三種語言分在三種不一樣的文件裏面，其實是把不一樣技術分開管理了，而不是邏輯上的「分而治之」。

html之中的onclick與jsx之中的onClick的區別：

• onclick添加的時間處理函數是在全局環境下執行的，這污染了全局環境，很容易產生意料不到的後果；
• 給不少DOM袁術添加onclick時間，可能會影響網頁的性能，畢竟，網頁須要的時間處理函數越多，性能就會越低；
• 對於使用onclick的DOM元素，若是要動態地從DOM樹中刪除的話，須要把對應的時間處理器註銷，加入忘了註銷，就可能形成內存泄露，這樣的bug，很難被發現。

在jsx之中，onClick掛載的每一個函數，均可以控制在組件範圍內，不會污染全局空間。
咱們在jsx中看到了一個組件使用了onClick，但並無產生直接使用onclick的html，而是使用了事件委託(event delegation)的方式處理點擊事件，不管有多少個onClick出現，其實最後都只在DOM樹上添加了一個事件處理函數，掛載在最頂層的DOM節點上。全部的點擊事件都被這個事件處理函數捕獲，而後根據具體組件分配給特定函數，使用事件委託的性能固然比每一個onClick都掛載一個事件處理函數要高。

由於React控制了組件的生命週期，咱們還能夠在React組件中定義樣式。

分解Reac應用

React的理念，歸結爲一個公式，就像下面這樣：

UI = render(data)

用戶看到的界面（UI），應該是一個函數render執行結果，只接受數據(data)做爲參數。這個函數是一個純函數，所謂純函數，指的的是沒有任何反作用，輸出徹底依賴於輸入的函數，兩次函數調用若是輸入相同，獲得的結果也絕對相同。如此一來，最終的用戶界面，在render函數肯定的狀況下徹底取決於輸入數據。
對於開發者來講，重要的是區分開那些是屬於data，哪些屬於render，想要更新用戶界面，要作的就是更新data，用戶界面天然會作出相應，因此react實際的也是「響應式編程」(reactive programming)的思想，這也就是react爲何叫作react的緣由。

Virtual Dom

既然react應用就是經過重複渲染來實現用戶交互，你可能會有一個疑惑:這樣的重複渲染會不會效率過低了呢?在jQuery的實現方式中，咱們能夠清楚地看到每次只有須要變化的哪個DOM元素被修改了；但是，在react的實現方式中，看起來每次render函數被調用，都須要把整個組件從新繪製一次，這樣看起來有點浪費。

事實並非這樣，react利用virtual dom，讓每次渲染都只從新渲染最少的DOM元素。要了解virtual dom，就要先了解dom，dom是結構話文本的抽象表達式，特定於web環境中，這個結構化文本就是html文本，html中的每一個元素都對應dom中某個節點，這樣，由於html元素的逐級包含關係，dom節點天然就構成了一個樹形結構，成爲DOM樹。

瀏覽器爲了渲染html格式的網頁，會先將html文本解析以構建dom樹，而後根據dom樹渲染出用戶看到的界面，當要改變界面內容的時候，就去改變dom樹上的節點。

web前端開發關於性能優化有一個原則：儘可能減小DOM操做。雖然dom操做也只式一些簡單的javascript語句，可是dom操做會引發瀏覽器對網頁進行從新佈局，從新繪製，這就是一個比javascript語句執行慢不少的過程。

若是使用mustache或者hogan這樣的模板工具，那就是生成html字符串賽到網頁中，瀏覽器又要作一次解析生產新的DOM節點，而後替換DOM樹上對應的子樹部分，這個過程的確定效率不高。雖然jsx看起來很像是一個模板，可是最終會被babel解析爲一條條建立react組件或者html元素的語句，神奇之處在於，react並非經過這些語句直接構建DOM樹，而是首先構建virtual dom。

既然dom樹是對html的抽象，那virtual dom就是對dom樹的抽象。virtual dom不會觸及瀏覽器部分，只是存在於javascript空間的樹形結構，每次自上而下渲染react組件時，會對比這一次產生的virtual dom和上一次渲染的virtual dom，對比就會發現差異，而後修改真正的dom樹時就只須要初級差異中的部分就行。

jquery的方式直觀易懂，對於初學者十分適用，可是當項目逐漸變得龐大時，用jquery寫出的代碼每每互相糾纏，不一樣的事件直接修改dom元素。

使用react的方式，就能夠避免構建這樣複雜的程序結構，不管何種事件，引起的都是react組件的從新渲染，至於如何只修改必要的dom部分，則徹底交給react去操做，開發者並不須要關係。react利用函數式編程的思惟來解決用戶界面渲染的問題，最大的優點式開發者的效率會大大提升，開發出來的代碼可維護性和可閱讀性也大大加強。

chapter two 設計高質量的react組件

做爲一個合格的開發者，不要只知足於編寫出了能夠運行的代碼，而要了解代碼背後的工做原理；不要只知足於本身編寫的程序可以運行，還要讓本身的代碼可讀並且易於維護。這樣才能開發出高質量的軟件。

做爲軟件設計的通則，組件的劃分要知足高內聚（high cohesion）和低耦合（low coupling）的原則。

高內聚指的式把邏輯緊密的相關內容放在一個組件中。用戶界面無外乎內容、交互行爲和樣式。傳統上，內容由html表示，交互行爲放在javascript代碼文件中，樣式放css文件中定義。這雖然知足一個功能模塊的須要，卻要放在三個不一樣的文件中，這其實不知足高內聚的原則。react卻不是這樣，展現內容的jsx、定義行爲的javascript代碼，甚至定義樣式的css，均可以放在一個javascript文件中，由於他們原本就是爲了實現一個具體的目的而存在的，因此說react天生具備高內聚的特色。

低耦合指的式不一樣組件之間的依賴關係要儘可能弱化，也就是每一個組件要儘可能獨立。保持整個系統的低耦合度，須要對系統中的功能有充分的認識，而後根據功能點劃分模塊，讓不一樣的組件去實現不一樣的功能，這個功夫還在開發者身上，不過，react組件的對外接口很是規範，方便開發者設計低耦合的系統。

react組件的數據

"差勁的程序要操心代碼，優秀的程序要操心數據結構和他們之間的關係。"

react組件的數據分爲兩種，prop和state，不管prop或者state的改變，均可能引起組件的從新渲染，那麼，設計一個組件的時候嗎，何時選擇prop何時選擇用state呢？原則很簡單，prop是組件對外的接口，state是組件內部的狀態，對外用prop，內部用state。

每一個react組件都是獨立存在的模塊，組件以外的一切都是外部世界，外部世界就是經過prop來和組件對話的。
當prop的類型不是字符串類型時，在jsx中必須使用花括號{}把prop值包住，因此style的值有兩層花括號，外層花括號表明是jsx的語法，內層的花括號表明這是一個對象常量。

react中的prop

prop 傳值分析：

class Counter extends Component {
    constructor(props){
        super(props);

        this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this);

        this.state = {
            count:props.initValue || 0;
        }
    }       
}

若是一個組件須要定義本身的構造函數，必定要記得在構造函數的第一行經過super調用父類也就是React.Component的構造函數。若是在構造函數中沒有調用super(props),那麼組件實例被構造以後，類實例的全部成員函數就沒法經過this.props訪問到父組件傳遞過來的props值。很明顯，給this.props賦值是React.Component構造函數的工做之一。

在Counter的構造函數中還給哦i昂貴成員綁定了當前this的執行環境，由於es6方法構造的react組件類並不自動給咱們綁定this到當前實例對象。在構造函數的最後，咱們能夠看到讀取傳入prop的方法，在構造函數中能夠經過參數props得到傳入prop值，在其餘函數中則能夠經過this,props訪問傳入的prop的值，好比在counter組件的render函數中，咱們就是經過this.props得到傳入的caption ,render函數代碼以下：

render(){
    const { caption } = this.props;
    return <div>
                <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
                <button style={buttonStyle} onClick={this.onClickDecremnetButton}>-</button>
                <span>{caption} count:{ this.state.count } </span>
           </div> 
}

react的state

驅動組件渲染過程的除了prop，還有state,state表明組件的內部狀態。因爲react組件不能修改傳入的prop，因此須要i記錄自身數據變化，就要使用state。
一般在組件類的構造函數結尾出初始化state,在counter構造函數中，經過this.state的賦值完成了對組件state的初始化。代碼以下：

constructor(props){
    // ...
    this.state = {
        count:props.initValue || 0;
    }
}

於2017.10.2

differences between react element and react component

react elements are plain objects.They describe what you want to see on the screen.React elements are inmutable .Once you create an element,you can't change its children or attributes.An element is like a single frame in a movie :it represents the UI at a certain point in time.

react components are like Javacript functions.they accept arbitrary inputs (called "props") and return react elements describing what should appear on the screen.

functional and class components

React componets must act like pure functions with repect to their props.
Locak state is exactly that:a feature available only to a Class.

什麼是組件

可以完成某個特定功能的獨立可重用的代碼。基於組件是普遍使用的軟件開發模式，是分而治之的方法。把大的應用分解成爲若干個小的組件，每一個組件專一某個特定的功能。把組件合起來就可以成爲一個功能龐大的應用。若是組件功能分解足夠巧妙，每一個組件能夠在不一樣的場景下重用，能夠構建出龐大靈活的應用。

prop

當外部世界傳遞一些數據給React組件，一個最直接的方式就是經過prop;一樣React組件要反饋數據給外部數據，也能夠用prop，由於Prop的類型限於純數據，也能夠是函數，函數類型的prop等於讓父組件交給子組件一個毀掉函數，子組件在恰當的實際調用函數的類型prop，能夠帶上必要的參數，這樣就能夠反過來把信息傳遞給外部的世界。
哈哈:看到這裏，不由想到了一個例子，一個也是在別處調用的狀況，就是常見的跨域方式，如jsonp，script標籤請求的數據就返回就是回掉一個以前已經定義好的函數。對於後端的數據處理來講，是至關於一個黑匣子。對於父子組件而言，也至關一個黑匣子裏面調用數據。兩個例子都是一個回掉函數的做怪。常言到，函數是代碼的分割，此話可當真。