你了解React嗎
了解，React是facebook搞出來的一個(gè)輕量級(jí)的組件庫，用于解決前端視圖層的一些問題，就是MVC中V層的問題瓦呼，它內(nèi)部的Instagram網(wǎng)站就是用React搭建的。
React解決了什么問題
我覺得解決了三個(gè)問題测暗，一個(gè)是組件復(fù)用問題央串，一個(gè)是性能問題，還有一個(gè)碗啄，如果也算的話质和，就是兼容性問題：
1、組件復(fù)用問題：在React之前的一些前端框架稚字，比如Anguar饲宿，bootstrap等，寫出來的組件胆描，都是能夠使用在瀏覽器端瘫想，雖然可以在各個(gè)web系統(tǒng)中復(fù)用，但是沒有辦法跨平臺(tái)復(fù)用昌讲，比如運(yùn)用在android或IOS的原生應(yīng)用上国夜。
但是React就可以，我們使用React寫出來的組件剧蚣，結(jié)合React-dom可以顯示在瀏覽器上支竹，結(jié)合React-native可以顯示在android、IOS原生應(yīng)用上鸠按，可以讓我們的組件礼搁，一次編寫，處處運(yùn)行目尖，幫助我們避免大量的重復(fù)勞動(dòng)馒吴。
而且因?yàn)镽eact是facebook推出來的，本身它的思想又很先進(jìn)瑟曲，所以在前端領(lǐng)域很快就火了起來饮戳，有大量的開發(fā)來構(gòu)建整個(gè)的環(huán)境，那么基于React也是出現(xiàn)了很多比較好用的組件庫洞拨，比如螞蟻金服的ant.design以及React-Bootstrap扯罐，基于這些組件庫，我們?cè)谧鲩_發(fā)的時(shí)候烦衣，可以極大的節(jié)省我們的開發(fā)成本歹河。
2、性能問題：在之前的開發(fā)當(dāng)中花吟，如果頁面的某個(gè)組件發(fā)生了變化
比如我們修改了Jim Green的名字秸歧，那我們需要提交修改請(qǐng)求，然后把用戶列表信息重新獲取一遍衅澈，最后把表格從頭到尾渲染一遍键菱，我們注意到，整個(gè)過程中今布，Joe Black等用戶信息所在的行经备，其實(shí)沒有發(fā)生過變化，它的重新渲染其實(shí)是你沒有必要的部默，而且渲染又是非常耗時(shí)的弄喘。
React做的一件事情，就是對(duì)于每個(gè)組件甩牺，它在內(nèi)存里生成一棵虛擬dom樹蘑志，當(dāng)組件發(fā)生變化的時(shí)候，它會(huì)生成一顆新的虛擬dom樹贬派，然后和老的進(jìn)行比較急但，找出有差異的節(jié)點(diǎn)，然后只更新發(fā)生變化的dom節(jié)點(diǎn)搞乏，所以更新的成本會(huì)比較小波桩，性能也會(huì)更好。
3请敦、瀏覽器兼容問題：React對(duì)瀏覽器的兼容也做了一些工作：
主要是在事件方面镐躲，我們知道储玫，各個(gè)瀏覽器的事件處理有可能不一致，比如取消事件冒泡：
event = event || window.event;
//取消事件的默認(rèn)行為
if (event.preventDefault) { // firefox
event.preventDefault();
} else { // IE 瀏覽器
event.returnValue = false;
}
React使用SyntheticEvent萤皂，包裝和規(guī)范了原生的瀏覽器事件撒穷，這樣各個(gè)瀏覽器的事件行為都能夠得到統(tǒng)一。
React的協(xié)議問題你了解嗎
React遵循的協(xié)議是“BSD許可證 + 專利開源協(xié)議”裆熙，這個(gè)協(xié)議比較奇葩端礼，如果你的產(chǎn)品跟facebook沒有競爭關(guān)系，你可以自由的使用react入录，但是如果有競爭關(guān)系蛤奥，你的react的使用許可將會(huì)被取消。
這也導(dǎo)致很多的大公司僚稿，比如百度凡桥、阿里巴巴、google蚀同、微軟等唬血，禁止公司內(nèi)部的項(xiàng)目使用React，不過16年阿里巴巴出了一個(gè)類似的做三端統(tǒng)一的前端框架唤崭，叫Weex拷恨，據(jù)說還不錯(cuò)，抗住了雙十一的壓力谢肾，還有這個(gè)項(xiàng)目已經(jīng)成功的入住Apache孵化器了腕侄，這也表示，在協(xié)議方面芦疏，是不會(huì)有React那種問題的冕杠。
了解shouldComponentUpdate嗎
React虛擬dom技術(shù)要求不斷的將dom和虛擬dom進(jìn)行diff比較，如果dom樹比價(jià)大酸茴，這種比較操作會(huì)比較耗時(shí)分预，因此React提供了shouldComponentUpdate這種補(bǔ)丁函數(shù)，如果對(duì)于一些變化薪捍，如果我們不希望某個(gè)組件刷新笼痹，或者刷新后跟原來其實(shí)一樣，就可以使用這個(gè)函數(shù)直接告訴React酪穿，省去diff操作凳干，進(jìn)一步的提高了效率。
React這種虛擬dom機(jī)制對(duì)于局部數(shù)據(jù)變動(dòng)的更新非常有效被济，而組件整體更新的場景發(fā)生的概率又比較小救赐，所以總的來說是非常不錯(cuò)的，像Vue組件更新以前用的是依賴收集的方式只磷，后來發(fā)現(xiàn)经磅，好像沒有React那么高效泌绣，所以在2.1.x版本的時(shí)候，也改成了虛擬dom的方式预厌。
你剛剛提到了依賴收集阿迈，那什么是依賴收集呢
如上面的這段Vue代碼，在模板中我們并沒有使用text3這個(gè)屬性配乓，當(dāng)我們對(duì)text1、text2進(jìn)行賦值的時(shí)候惠毁，Vue會(huì)刷新模板犹芹，但是如果我們對(duì)text3進(jìn)行賦值的時(shí)候，就不會(huì)刷新鞠绰，為什么呢腰埂？因?yàn)槭褂昧艘蕾囀占?/p>
簡單來說當(dāng)Vue渲染模板的時(shí)候，會(huì)讀取text1蜈膨、text2這兩個(gè)變量屿笼，這個(gè)時(shí)候就會(huì)調(diào)用它們的getter函數(shù)，然后在getter里面會(huì)把text1翁巍、text2收集到收集器里驴一，等到對(duì)text1、text2賦值的時(shí)候灶壶，會(huì)判斷他們是否在收集器里肝断，如果在就會(huì)更新模板，否則就不做處理驰凛，這個(gè)就是所謂的依賴收集胸懈。
【未完待續(xù)...】
