state, props,render()
為什么說React是由數(shù)據(jù)驅(qū)動(dòng)的红竭？
- 當(dāng)組件的state或者props發(fā)生改變時(shí)碴裙，render函數(shù)就會(huì)被執(zhí)行卸留，而頁面又是由render函數(shù)渲染出來的，因此說浩淘，數(shù)據(jù)一旦改變頁面就會(huì)隨之改變
- 當(dāng)父組件的render函數(shù)被執(zhí)行時(shí)咳焚，它的子組件的render函數(shù)也會(huì)被執(zhí)行一次
虛擬DOM
React中的render()函數(shù)執(zhí)行效率是非常高的洽损，原因在于React中使用了虛擬DOM
- 原因：減少了JS中創(chuàng)建真實(shí)DOM的性能損耗，取而代之的是創(chuàng)建虛擬DOM革半，就是JS對(duì)象碑定，另外在進(jìn)行對(duì)比時(shí)減去了真實(shí)DOM的對(duì)比，取而代之的是虛擬DOM即JS對(duì)象的對(duì)比又官，從而提高了性能
1 生成state數(shù)據(jù)
2 JSX模版
3 生成虛擬DOM(虛擬DOM就是一個(gè)JS數(shù)組對(duì)象延刘，用它來描述真實(shí)DOM) --此處會(huì)帶來一些新能損耗，但是JS生成一個(gè)對(duì)象性能損耗是很小的六敬，如果用JS生成一個(gè)DOM碘赖，會(huì)使用webApplication的API，這種性能損耗是很大的
['div', {id: 'abc'}, ['span',{ }, 'hello world']]
4 用虛擬DOM生成真實(shí)的DOM外构，來顯示
<div id='abc'><span>hello world</span></div>
5 state 發(fā)生變化
6 數(shù)據(jù) + 模版 生成新的虛擬DOM
['div', {id: 'abc'}, ['span',{ }, 'bye bye']]
7 比較原始虛擬DOM和新的虛擬DOM的區(qū)別普泡，找到區(qū)別是span中的內(nèi)容
8 直接操作DOM 改變span中的內(nèi)容
JSX模版生成真實(shí)DOM流程
- JSX代碼就是一個(gè)模版，并不是真實(shí)的DOM典勇，之后React會(huì)將模版與state結(jié)合，最終生成一個(gè)虛擬DOM即JS對(duì)象叮趴，之后才會(huì)生成真實(shí)DOM
- jSX -> JS對(duì)象 -> 真實(shí)DOM
JSX底層如何被轉(zhuǎn)為JS對(duì)象割笙？最終又是如何變?yōu)檎鎸?shí)DOM?
- 使用了
React.createElement('div',{屬性},'item')，將一個(gè)對(duì)象傳給createElement函數(shù)眯亦，函數(shù)內(nèi)部首先會(huì)生成一個(gè)虛擬DOM伤溉，最終渲染成真實(shí)的DOM- jSX -> createElement函數(shù) -> 虛擬DOM(JS對(duì)象) -> 真實(shí)DOM
虛擬DOM的優(yōu)點(diǎn)
- 提升了性能
- 得以實(shí)現(xiàn)跨端應(yīng)用（例如RN，得益于虛擬DOM才能實(shí)現(xiàn)原生應(yīng)用妻率，因?yàn)槿绻麤]有虛擬DOM乱顾，當(dāng)使用JSX模版和數(shù)據(jù)結(jié)合后去直接渲染真實(shí)DOM，在瀏覽器中是沒有問題的宫静，在手機(jī)端是不存在DOM這個(gè)概念的走净，因此手機(jī)端是無法使用的券时；當(dāng)使用了虛擬DOM后，JS對(duì)象是可以被手機(jī)端識(shí)別的伏伯，在PC端最終會(huì)生成真實(shí)DOM橘洞，在手機(jī)端不會(huì)生成真實(shí)的DOM，而是生成一些原生的組件）
虛擬DOM中的Diff(Difference)算法
此算法針對(duì)上述步驟中的第7步说搅，即比較原始虛擬DOM和新的虛擬DOM的區(qū)別,可以提高比對(duì)性能
- React底層在調(diào)用了
setState方法時(shí)炸枣，才會(huì)出發(fā)Diff算法(setState方法是異步執(zhí)行的)
問題：為什么
setState方法會(huì)被React設(shè)計(jì)成一個(gè)異步方法？
場景：如果在很短時(shí)間間隔內(nèi)弄唧，連續(xù)調(diào)用了3次setState方法,那么React底層可能會(huì)調(diào)用3次Diff算法進(jìn)行比對(duì)适肠，這樣會(huì)很消耗性能
React實(shí)現(xiàn)：會(huì)將這3次調(diào)用setState方法合并為只調(diào)用一次setState方法，即只做一次虛擬DOM的比對(duì),然后更新一次DOM
- Diff算法會(huì)按照同層比較的方式進(jìn)行比對(duì)
- 如果第一層進(jìn)行比對(duì)時(shí)就不一樣候引，React就不會(huì)繼續(xù)往下一層比對(duì)了侯养，它會(huì)將原始的虛擬DOM下的節(jié)點(diǎn)全部刪除，然后用重新生成節(jié)點(diǎn)下的虛擬DOM替換原始的虛擬DOM下的所有節(jié)點(diǎn)
- 在虛擬DOM比對(duì)時(shí)背伴，每個(gè)節(jié)點(diǎn)都會(huì)有一個(gè)key值沸毁，這樣便于與新的虛擬DOM進(jìn)行比對(duì)
- 也是為什么在做循環(huán)操作時(shí)，不要省略key值傻寂，這樣就無法保證在原始虛擬DOM中的key值與新的虛擬DOM的key值保持一致
- 例如在如下循環(huán)中息尺，使用了index作為key值時(shí)，此時(shí)輸入a,b,c
a 對(duì)應(yīng)key值為0 b對(duì)應(yīng)key值為1 c對(duì)應(yīng)key值為2
當(dāng)刪除a時(shí)疾掰，此時(shí) b對(duì)應(yīng)key值為0 搂誉，c對(duì)應(yīng)key值為1
那么此時(shí)，b之前的key值是1静檬，當(dāng)前b的key值是0 炭懊，所以就沒有辦法建立起關(guān)系了
這就是用index作為key值的一個(gè)問題，會(huì)導(dǎo)致key值不穩(wěn)定
return this.state.list.map((item,index) => {
return (
<div key={index}>
<TodoItem
textContent={item}
index={index}
deleteItem={this.handleItemDelete}
/>
</div>
)
})
總結(jié): 同層比較和key值比較都是diff算法的一部分
