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標簽請求的數據就返回就是回掉一個之前已經定義好的函數。對于后端的數據處理來說，是相當于一個黑匣子。對于父子組件而言，也相當一個黑匣子里面調用數據。兩個例子都是一個回掉函數的作怪。常言到，函數是代碼的分割，此話可當真。

轉載于:https://www.cnblogs.com/lakeInHeart/p/7537824.html

總結

以上是生活随笔為你收集整理的react redux学习之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。