1.React 不是一個(gè)完整的MVC硼一,MVVM框架
2.React 跟Web Components不沖突
3.React的特點(diǎn)就是輕
4.組件化開(kāi)發(fā)思路
應(yīng)用場(chǎng)景:
1.復(fù)雜場(chǎng)景下的高性能
2.重用組件庫(kù),組件組合
React中組件并不是真實(shí)的 DOM 節(jié)點(diǎn),而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu),叫做虛擬 DOM (virtual DOM)鱼冀。只有當(dāng)它插入文檔以后蚣录,才會(huì)變成真實(shí)的 DOM 。根據(jù) React 的設(shè)計(jì)夯秃,所有的 DOM 變動(dòng),都先在虛擬 DOM 上發(fā)生痢艺,然后再將實(shí)際發(fā)生變動(dòng)的部分仓洼,反映在真實(shí) DOM上,這種算法叫做 DOM diff 堤舒,它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)色建。
JSX:
JSX 執(zhí)行更快,因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化舌缤。
它是類型安全的箕戳,在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
使用 JSX 編寫(xiě)模板更加簡(jiǎn)單快速国撵。
組件生命周期對(duì)比:
componentWillMount() 創(chuàng)建之前
componentDidMount() 創(chuàng)建之后
componentWillUpdate() 更新之前
componentDidUpdate() 更新之后
componentWillUnmount() 卸載之前
componentWillReceiveProps() 組件參數(shù)更新
具體生命周期分為:
①實(shí)例化
首次實(shí)例化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
實(shí)例化完成后的更新
getInitialState
componentWillMount
render
componentDidMount
②存在期
組件已存在時(shí)的狀態(tài)改變
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
③銷毀&清理期
componentWillUnmount
組件嵌套:
邏輯清晰
代碼模塊化
封裝細(xì)節(jié)
Mixin
代碼復(fù)用
即插即用
適應(yīng)性強(qiáng)
使用Mixin實(shí)現(xiàn)雙向綁定陵吸。
推薦閱讀:
react組件生命周期過(guò)程
React從入門到精通系列
相關(guān):
React主體
webPack
Flex
React-route
Redux
Mocha:測(cè)試框架
Istanbul:代碼覆蓋率