此文適合react新手入門，react大佬可以略過(畢竟以前都是寫vue,react才寫了乙個多月， 掩面淚奔)
主要是學習react中的一些經驗總結，如果你覺得對你有幫助，可以給個贊github。
react專案入門
react版本：16.0.0 (因為工作中還是15的版本)
首先我們先來說說 有狀態元件和無狀態元件
有狀態元件：元件內部狀態發生變化，需要state來儲存變化。
無狀態元件：元件內部狀態是不變的，用不到state。建議寫成函式元件
元件設計思路：通過定義少部分有狀態元件管理整個應用的狀態變化，並且將狀態通過props傳遞給其餘無狀態元件。
有狀態元件主要關注處理狀態變化的業務邏輯，無狀態元件主要關注元件ui渲染工作。這樣更有利於元件的復用,元件之間解耦更加徹底
這樣有時就會產生乙個問題，如果給ui元件加不同的邏輯怎麼辦？
2種比較好的方法， this.props.children 和 hoc ， 具體例項。那麼下面就來詳細說說 hoc 高階元件
知識前置：
裝飾器設計模式：允許向乙個現有的物件新增新的功能，同時又不改變其結構。這種型別的設計模式屬於結構型模式，它是作為現有的類的乙個包裝。
這種模式建立了乙個裝飾類，用來包裝原有的類，並在保持類方法簽名完整性的前提下，提供了額外的功能。
在js中高階函式可以接受乙個函式作為引數，返回值作為也是函式的函式。類似的 高階元件也可以接受乙個元件為引數，返回乙個被加工過的元件。
本質上高階函式是乙個函式，而不是元件。
操縱props
通過ref訪問元件的例項
元件狀態提公升
用其他元素包裝元件
例子：操縱props 這個用的比較多
在被包裝的元件接收到props之前。高階元件可以先攔截到props,對props執行增刪改等操作，然後將修改過的props傳給被包裝元件。
import react, from 'react'
function withpersistentdata (wrapedcomponent) )
}render
() = this.state;
// 通過 把傳給當前元件的值繼續傳給被包裝的元件
return
} }
}@withpersistentdata
export default class mycomponent extends component )}}
複製**
高階元件通過ref獲取被包裝的元件例項的引用，然後高階元件就具備了直接操作被包裝元件的屬性和方法的能力。
function withref (wrapedcomponent)
render
() 把傳給當前元件的值繼續傳給被包裝的元件
// 給被包裝的元件新增ref屬性，獲取被包裝元件例項並賦值給this.wrapedcomp
return
} />}}}
複製**
上面已經說過 無狀態元件更容易被復用，我們可以利用高階元件將原本受控元件中需要自己維護的的狀態統一提公升到高階元件中，受控元件無狀態化。
import react, from 'react'
state =
handlevaluechange = (e) => )
} render
() }
return
}@withcontrolledcomp
class controlledcomp extends component
}複製**
function withredcolor (wrapedcomponent) >
) }
}}複製**
* 引數傳遞 高階元件的引數除了接受元件，還可以接受其他引數。
在第乙個操作props的例子裡，如果要獲取key值不確定時，這個元件就不滿足了。
function withpersistentdata = (key) => (wrapedcomponent) => )
}render
() = this.state;
// 通過 把傳給當前元件的值繼續傳給被包裝的元件
return
} }
}class mycomponent extends component )}}
// 獲取key=『data』的資料
const mycomponentwithdata = withpersistentdata('data')(mycomponent)
// 獲取key=『name』的資料
const mycomponentwithdata = withpersistentdata('name')(mycomponent)
複製**
複製**
* 注意事項
不要在render中使用高階元件，也盡量不要在其他的生命週期函式中使用高階元件。 因為高階元件每次返回的都是乙個新元件，於是每次render，前一次建立的元件都會被解除安裝，本次建立的元件會被重新掛載。
如果需要使用被包裝元件的靜態方法，就必須要手動複製這些方法。因為高階元件不包含被包裝元件的靜態方法。
refs不回被傳遞給被包裝元件。
與父元件的區別。如果這部分邏輯與ui/dom相關，那麼這部門邏輯適合放在父元件中實現；如果邏輯與dom不直接相關，那麼這部分邏輯適合放在高階元件的抽象中。例如資料校驗請求傳送等
掛載階段
1. constructor
2. componentwillmount
3. render
4. componentdidmount
複製**
1. coustructor
通常用於初始化元件的state以及繫結事件的處理方法(比如bind(this))等
2. componentwiillmound
在元件被掛載到dom前呼叫，且只會呼叫一次，
實際專案中比較少用到，因為可以在該方法中的執行的都可以提到coustructor中
在這個方法中this.setstate不會引起重新渲染
3. render
渲染方法。
注意：render只是返回乙個ui的描述，真正渲染出頁面dom的工作由react自己完成
4. componentdidmount
在元件被掛載到dom後呼叫，且只會呼叫一次，
通常用於像後端請求資料
在這個方法中this.setstate會引起元件的重新渲染
複製**
1. componentwillreceiveprops
2. shouldcomponentupdate
3. componentwillupdate
4. render
5. componentdidupdate
複製**
1. componentwillrceiveprops(nextprops)
這個方法只在props引起元件更新時呼叫。
一般會比較一下this.props和nextprops來決定是否執行props變化後的邏輯
比如：根據新的props呼叫this.setstate來觸發元件的重新渲染
2. shouldcomponentupdate(nextprops,nextstate)
這個方法決定元件是否繼續執行更新過程。
預設是true，繼續更新；false阻止更新。
一般是通過比較nextpops，nextstate和當前元件的props，state來決定返回結果。
這個方法可以減少不必要的渲染，優化元件效能。
原因：根據渲染流程，首先會判斷shouldcomponentupdate是否需要更新。如果需要更新，呼叫render方法生成新的虛擬dom與舊的虛擬dom進行對比(render只是返回乙個ui描述)，如果對比不一致，則根據最小粒度改變去更新dom。
3. componentwillupdate
render前呼叫，元件更新前執行某些邏輯的地方。
一般很少用到。
4. render
5. componentdidupdate(prevprops, prevstate)
元件更新後被呼叫，可以作為操作更新後dom的地方。
這個方法中的prevprops和prevstate代表元件中更新前的props和state。
注意：在render前的生命週期中，componentwillreceiveprops,shouldcomponentupdate,componentwillupdate中的this.state依然指向更新前的state。
複製**
componentwillunmount
元件解除安裝前被呼叫。
清除定時器，清除componentdidmount中手動建立的dom，取消請求等
複製**
最後感謝能看到這裡的朋友，因為水平有限，如果有錯誤敬請指正，十分感激。
參考:react高階之路
React高階元件和高階函式
高階元件 hoc 是react中對元件邏輯進行重用的高階技術，但高階元件本身並不是react api，它只是一種模式，這種模式是由react自身組合性質必然產生的 具體而言，高階元件就是乙個函式，且該函式接受乙個元件作為引數，並返回乙個新的元件const enhancedcomponent high...
React 知識點歸納 純函式和高階函式
一類特別的函式 只要是同樣的輸入，必定得到同樣的輸出 必須遵守以下一些約束 a.不得改寫引數 b.不能呼叫系統 i o 的 api c.能呼叫 date.now 或者 math.random 等不純的方法 reducer 函式必須是乙個純函式 理解 一類特別的函式 a.情況 1 引數是函式 b.情況...
python函式的高階應用詳解
函式是我們所熟知的，在python中函式的定義格式如下 def 函式名 形式引數 函式體 函式的封裝就是實現 塊的復用，python內建了一些基礎的函式，開發者也可以自己定義函式，函式只能先定義，再進行呼叫。1 程式遇到函式呼叫的情況時，暫停執行 2 將實際引數值傳遞給函式引數 3 執行函式體語句 ...