? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?小年糕集訓(xùn)營畢業(yè)總結(jié)
? ?????光陰似箭敏释，歲月如梭。來到小年糕已經(jīng)不知不覺快過去將近兩個月的時間， 從剛來時對于組件化懵懂的初學(xué)者 到后來能夠自己編寫出2048 音樂播放器个唧。感謝在這段日子里每一個幫助過我的人 包括茹海波大佬的演講使我對于一個人的事業(yè)展望有了新的認(rèn)識，感謝琪哥貼心安排的飲食起居设预，更加感謝我的老師們在這段日子里耐心的教導(dǎo)徙歼，用他們豐富老練的工作經(jīng)驗(yàn)來傳授給我們最實(shí)用的知識。那么接下來就讓我們回顧一下在這兩個月里 我們具體都學(xué)習(xí)了哪些知識。
? ? ? ? 1.基礎(chǔ)的HTML標(biāo)簽 以及簡單CSS基礎(chǔ)及ES6基礎(chǔ)
? ? ? ? 2.react框架?
? ?????通過npm引入react魄梯，react-dom模塊 就可以引用react的jsx模板的寫法 允許我們編寫看起來像 HTML的JavaScript 桨螺。
? ? ? ? 3.組件的構(gòu)建語法以及組件化的合理拆分
? ? ? ? 在引入react后 通過拆分頁面 將其拆分成一個個組件 大多數(shù)拆分為自頂向下拆分 在拆分時觀察哪些組件可以復(fù)用 哪些組件的屬性可以自治。通過組件的拆分可以使其有合適的解耦性 復(fù)用性 以及自治 大大減少了重復(fù)代碼的書寫以及項(xiàng)目變大時難以維護(hù)的難題酿秸。其通過繼承React.Compnent類來自定義組件灭翔，通過render()方法返回所需要的元素。通過setState方法來處理各自的數(shù)據(jù)狀態(tài)允扇，但是此時父子組件之間的通信還是較為傳統(tǒng)的props傳遞以及事件回調(diào)的形式 當(dāng)多級組件進(jìn)行嵌套時缠局，將會造成回調(diào)地獄等問題
? ? ? ? 4.引入Redux
? ? ? ? 為了解決數(shù)據(jù)狀態(tài)分散復(fù)雜 難以管理的狀態(tài) 緊接著便學(xué)習(xí)了Redux機(jī)制 其通過createStore方法來創(chuàng)建一個集中管理組件狀態(tài)的一個大的倉庫Store，再通過與react配合的'react-redux'模塊中的Provider來使其與容器組件進(jìn)行連接 使容器組件可以通過Connect方法來與Store進(jìn)行連接 提到connect就不得不提及mapStateToProps（state,ownProps）, mapDispatchToProps（dispatch,,ownProps）這兩個函數(shù)參數(shù) ,這兩個函數(shù)參數(shù)可以將需要的state屬性和dispatch方法傳遞給綁定的組件上作為props（注意：在傳遞State時要將所需內(nèi)容傳遞而不是一股腦將所有state返回而引起沒有所需props更新時而造成重新渲染的問題考润，而且當(dāng)容器中子組件沒有使用純函數(shù)組件時 如果父組件更新 即使子組件所需props沒有變化那么也將會更新）注意action對象中最少有一個type屬性 多數(shù)情況下也應(yīng)該有一個payload傳值屬性
? ? ? ? 5.兩個優(yōu)化結(jié)構(gòu)的工具函數(shù)
? ? ? ? 一個是combineReducers（{reducer1狭园，reducer2}）：當(dāng)項(xiàng)目足夠大時 一個reducer往往難以清晰的管理所有數(shù)據(jù) 那么此時就需要將reducer進(jìn)行拆分使其易于維護(hù)可讀，那么這個函數(shù)就是幫助我們把拆分的所有reducer進(jìn)行打包合成一個reducer供creatStore方法使用
? ? ? ? ? 另一個是bindActionCreators（actionCreators, dispatch）第一個參數(shù)可以是一個?action creator糊治，或者鍵值是 action creators 的對象唱矛。其將actionCreators與dispatch綁定 這樣就可以省去每次都寫dispatch 而且也省去了將dispatch向下的傳遞
? ? ? ? 6.螞蟻金服UI庫 ant-design
? ??????通過npm安裝ant-design的UI組件 但是千萬不要忘記還要引入antd.css否則其CSS樣式將不會顯示出來，之后通過官方文檔查看組件所需props 以及里面的layout布局結(jié)構(gòu)也是很好用井辜，總體來說使用起來還是較為簡單
? ? ? ? 7.中間件的編寫
? ? ? ? 首先如要引用中間件 那么需要在createStore中的第二個參數(shù)中調(diào)用applyMiddleware方法 并將所需中間件按所需順序作為參數(shù)插入到applyMiddleware方法里绎谦。在中間件的編寫時要注意參數(shù)的順序store=>next=>action=>{....} 而其中next與store中的dispatch方法是有區(qū)別的,next(action)后是將其傳遞給下一個中間件，而store.dispatch方法是將其傳遞給第一個中間件,也因此要注意中間件插入的順序粥脚，中間件顧名思義是作為加工處理廠一般的存在窃肠，常存在于某兩個事物之間 其便存在于dispatch觸發(fā)后與到達(dá)reducer進(jìn)行處理之間 常用中間件的編寫時也常常在中間件中引入了promise對象來達(dá)到異步的實(shí)現(xiàn)
? ? ? ? 8.react-router
? ? ? ? 通過npm安裝’react-router‘ 之后通過引入<Router routes={routeConfig} />
routeConfig為配置對象來進(jìn)行無刷新路由跳轉(zhuǎn) 具體參考react-router3中文網(wǎng)?在組件中引入this.props.children便可引入子組件
? ? ? ? 9.normalizr
? ? ? ? 當(dāng)后端傳來的數(shù)據(jù)錯綜復(fù)雜，層級嵌套很深的時候且可能會有很多復(fù)用的數(shù)據(jù)以及頻繁的操作時我們此時便要考慮應(yīng)該使用normalizr工具函數(shù)來進(jìn)行數(shù)據(jù)扁平化 在數(shù)據(jù)扁平化時我們要考慮好哪些作為主鍵 哪些子屬性可以再次進(jìn)行拆分 其中要注意的是new Schema.Entity()時其是對象刷允，用normalizr函數(shù)處理所需數(shù)據(jù)時要與其類型相對應(yīng)冤留。如果是數(shù)組的話需要將其轉(zhuǎn)換為數(shù)組。第一個參數(shù)為轉(zhuǎn)換后entities后的屬性名树灶，第二個參數(shù)是子屬性扁平化的規(guī)則纤怒，第三個為主鍵的值。之后再通過normalize(handledata,schema.entity)進(jìn)行處理
? ? ? ? 10.自定義組件的編寫
? ??????在編寫自定義組件時天通，首先要確定此組件哪些屬性是應(yīng)該暴漏出去的泊窘。哪些屬性是私有的應(yīng)該自己維護(hù)的。并且要注意自定義組件不是完全的自制像寒，有些屬性在必要條件下應(yīng)該由外部傳進(jìn)烘豹，通常默認(rèn)屬性用static defaultProps來定義。 為了使提高組件的健壯性诺祸，可以引用prop-types來規(guī)范所傳入的props吴叶。
? ? ? ? 11.數(shù)據(jù)結(jié)構(gòu)中樹的遍歷
????????在數(shù)據(jù)的結(jié)構(gòu)為樹時 那么盡量采用遞歸函數(shù)的方式來進(jìn)行組件的渲染 通過判斷有無子節(jié)點(diǎn)來遞歸下去，直到葉子節(jié)點(diǎn)序臂。注意要有臨界返回值 以防造成無限遞歸
? ? ? ? ?12.eslint規(guī)范代碼格式
? ??????采用airbnb規(guī)范格式 使代碼規(guī)整有序 利于大型項(xiàng)目中多人協(xié)作開發(fā)蚌卤，其特別強(qiáng)調(diào)了react組件如果不是必須用到類組件那么必須采用純函數(shù)組件的寫法來創(chuàng)建組件实束，純函數(shù)組件的優(yōu)點(diǎn)有很多，首先看上去會很簡潔逊彭。其次純函數(shù)組件中 可以直接定義函數(shù) 而引用時無需使用this咸灿。最后在純函數(shù)組件中沒有生命周期等 react承諾未來會針對其進(jìn)行優(yōu)化 在大型復(fù)雜項(xiàng)目中將會大大的提高構(gòu)建的速度。
