目錄
- 虛擬DOM
- ref的使用
虛擬DOM
當組件的state或者props發(fā)生改變時，render函數(shù)就會重新執(zhí)行语卤。當父組件的render函數(shù)被運行時，它的子組件的render都將被重新運行。
React渲染機制：
1.state 數(shù)據(jù)
2.JSX模版
3.數(shù)據(jù) + 模版結合粹舵，生成虛擬DOM.['div', {id: 'abc', ['span', {}, 'hello world']}]
虛擬DOM是一個JS對象
4.用虛擬DOM的結構生成真實的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)容(Diff算法)
8.直接操作DOM眼滤，改變span中的內(nèi)容
整個過程為：JSX -> React.createElement -> 虛擬DOM (JS 對象 )-> 真實的DOM
引入虛擬DOM的好處：
- 性能提升巴席，從DOM比對變成了JS比對
- 它使得跨端應用得以實現(xiàn)。React Native
虛擬DOM中的Diff算法
1.setstate為什么是異步的诅需？
性能優(yōu)化漾唉，將多次setState合成一次setState，減少虛擬DOM比對堰塌。
2.Diff進行同層比對赵刑，逐層去比對，如果發(fā)現(xiàn)不同场刑，直接替換般此，其后面的子
層全部廢棄。
3.為什么做列表循環(huán)的時候要引入key值牵现？
提高虛擬DOM比對的性能铐懊，但是key值要保持穩(wěn)定，不要用index做key值
ref的使用
在react中可以使用ref來獲取dom元素施籍。
<input
ref={(input) => {this.input=input}}
value={this.state.inputValue}
onChange={this.handleInputChange}/>
handleInputChange()通過e.target獲取input的value值居扒，也可修改為const value = this.input.value
但要注意的是：
當ref和setState一起使用的時候概漱，要把操作dom的語法放在setState的第二個參數(shù)的函數(shù)里面丑慎，因為setState是異步函數(shù)。這樣就可以保證操作dom的方法是在頁面渲染后執(zhí)行的瓤摧。
handleBtnClick () {
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}), () => {
console.log(this.ul.querySelectorAll('div').length)
})
}
如果將console.log(this.ul.querySelectorAll('div').length)放在setState后面竿裂，就會出現(xiàn)下面的情況，獲取到的div總是比實際少一個照弥。
（完）
