React

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:代碼覆蓋率

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市介牙,隨后出現(xiàn)的幾起案子壮虫,更是在濱河造成了極大的恐慌,老刑警劉巖环础,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囚似,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡线得,警方通過(guò)查閱死者的電腦和手機(jī)饶唤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)贯钩,“玉大人募狂,你說(shuō)我怎么就攤上這事〗抢祝” “怎么了祸穷?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)谓罗。 經(jīng)常有香客問(wèn)我,道長(zhǎng)季二,這世上最難降的妖魔是什么檩咱? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任揭措,我火速辦了婚禮,結(jié)果婚禮上刻蚯,老公的妹妹穿的比我還像新娘绊含。我一直安慰自己,他們只是感情好炊汹,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布躬充。 她就那樣靜靜地躺著讨便,像睡著了一般。 火紅的嫁衣襯著肌膚如雪霸褒。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天废菱,我揣著相機(jī)與錄音,去河邊找鬼殊轴。 笑死衰倦,一個(gè)胖子當(dāng)著我的面吹牛旁理,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播韧拒,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼叛溢!你這毒婦竟也來(lái)了塑悼?” 一聲冷哼從身側(cè)響起楷掉,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤厢蒜,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后烹植,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體斑鸦,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年草雕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了巷屿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡墩虹,死狀恐怖嘱巾,靈堂內(nèi)的尸體忽然破棺而出憨琳,到底是詐尸還是另有隱情,我是刑警寧澤旬昭,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布篙螟,位于F島的核電站,受9級(jí)特大地震影響问拘,放射性物質(zhì)發(fā)生泄漏遍略。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一骤坐、第九天 我趴在偏房一處隱蔽的房頂上張望绪杏。 院中可真熱鬧,春花似錦或油、人聲如沸寞忿。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)腔彰。三九已至,卻和暖如春辖佣,著一層夾襖步出監(jiān)牢的瞬間霹抛,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工卷谈, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留杯拐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓世蔗,卻偏偏與公主長(zhǎng)得像端逼,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子污淋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,277評(píng)論 0 2
  • 原教程內(nèi)容詳見(jiàn)精益 React 學(xué)習(xí)指南顶滩,這只是我在學(xué)習(xí)過(guò)程中的一些閱讀筆記,個(gè)人覺(jué)得該教程講解深入淺出寸爆,比目前大...
    leonaxiong閱讀 2,843評(píng)論 1 18
  • 本筆記基于React官方文檔礁鲁,當(dāng)前React版本號(hào)為15.4.0。 1. 安裝 1.1 嘗試 開(kāi)始之前可以先去co...
    Awey閱讀 7,729評(píng)論 14 128
  • react 基本概念解析 react 的組件聲明周期 react 高階組件赁豆,context, redux 等高級(jí)...
    南航閱讀 1,070評(píng)論 0 1
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,075評(píng)論 2 35