從ios轉(zhuǎn)戰(zhàn)rn都伪,從3月份到7月份带猴,學(xué)習(xí)筆記观堂。
層級關(guān)系,學(xué)習(xí)過程
Javascript
推薦比較好的學(xué)習(xí)網(wǎng)站,沒事的時候去溜達(dá)溜達(dá)蛤签。
@W3School學(xué)習(xí)Javascript
ReactJS
ReactJS是facebook推出的一種框架切端。
主要的是解決復(fù)雜或頻繁的DOM操作。
ReactJS是創(chuàng)建一種虛擬DOM的方式顷啼,diff算法踏枣,每當(dāng)有更新時昌屉,計算渲染的組件,避免不必要其他組件的渲染茵瀑。
ReactNative
并不是webView的實現(xiàn)间驮。
React是一種思想,F(xiàn)acebook對于Web Components的理解與實現(xiàn).
React native 是用React的方式開發(fā)mobileApp马昨。
結(jié)構(gòu)圖
生命周期
生命周期大體可以分為三部分:
- MOUNTING
- RECEIVE_PROPS
- UNMOUNTING
getDefaultProps 方法只執(zhí)行一次竞帽,這樣所有實例初始化的 props 將會被共享。
React刷新頁面
- props
props就是組件的屬性鸿捧,由外部通過 JSX 屬性傳入設(shè)置
- state
state 是組件的當(dāng)前狀態(tài), 根據(jù)狀態(tài) state 呈現(xiàn)不同的 UI 展示
pure render:無狀態(tài)組件非常簡單屹篓,開銷很低,如果可能的話盡量使用無狀態(tài)組件
{
const HelloMessage = (props) => <Text> Hello ${props.name}</Text>"
}
React常用的組件庫
Immutable
- JavaScript 中的對象一般是可變的(Mutable),當(dāng)應(yīng)用復(fù)雜后匙奴,這就造成了非常大的隱患
- Immutable就是解決這種問題堆巧,將數(shù)據(jù)進行解耦,只有oldState => newState泼菌,不會在老的數(shù)據(jù)上面做修改谍肤,會生成新的數(shù)據(jù)。
- 一定程度上實現(xiàn)了MVVM的設(shè)計思想哗伯。
- List->Array, Map->Object
Redux
如果數(shù)據(jù)量很龐大荒揣,業(yè)務(wù)量很復(fù)雜的時候,依靠props來傳遞數(shù)據(jù)就顯得有些復(fù)雜和難以維護焊刹,于是就有了redux和flux系任。
- State
- Reducer
- Action
- Store
redux默認(rèn)只會在程序中存在一個store,這與flux的最大不同之處虐块,store里面存儲了所有的state俩滥,state存儲了所有用到的數(shù)據(jù),通過action的狀態(tài)改變非凌,在reducer里面做出相應(yīng)的數(shù)據(jù)轉(zhuǎn)變和傳輸举农。
通過依靠connect的方法荆针,將store中的state以props的方式傳遞到component中去敞嗡。
Immutable與Redux的結(jié)合使用
immutable與redux相輔相成,可以在redux的state中將數(shù)據(jù)用immutable封裝起來航背,防止數(shù)據(jù)出現(xiàn)變動喉悴。
每一個redux中action的改變,觸發(fā)reducer中的數(shù)據(jù)轉(zhuǎn)變玖媚。也只有在reducer中才可以進行state的數(shù)據(jù)轉(zhuǎn)變箕肃,保證了數(shù)據(jù)的不可變性。