React的diffing算法(面試題)

React的diffing算法

在虛擬DOM轉爲真實DOM的時候，會想經過diffing算法進行一個比較。若是已經渲染過一次了，再次渲染的時候，會對相同key值的節點進行比較，若是內容相同，就會複用原來的那個真實DOM。

經典面試題：

1. react/vue 中的key有什麼做用? ( key的內部原理是什麼? )

2. 爲何遍歷列表時，key最好不要用index?

虛擬DOM中key的做用

1. 簡單說，key是虛擬DOM對象的標識，在更新顯示時key起着極其重要的做用；

2. 詳細講，當狀態中的數據發生變化時，react會根據【新數據】生成【新的虛擬DOM】，隨後React進行【新虛擬DOM】與【舊虛擬DOM】的diff比較，比較規則以下：

   a. 舊虛擬DOM中找到了與新虛擬DOM相同的key：（1）若虛擬DOM中內容沒變，直接使用以前的真實DOM；（2）若虛擬DOM中內容扁了，則生成新的真實DOM，隨後替換掉頁面中以前的真實DOM

   b. 舊虛擬DOM中未找到與新虛擬DOM相同的key

用index做爲key可能會引起的問題

1. 若對數據進行：逆序添加、逆序刪除等破壞順序操做，會產生沒有必要的真實DOM更新 ===> 界面沒有效果問題，可是效率低。

2. 若是結構中還包含輸入類的DOM：會產生錯誤的虛擬DOM更新 ===> 界面有問題

   以下例，若是是用index做爲key，經過比較規則，input框的key是不變的，所以input的渲染在對比以後不發生改變，直接使用了以前的真實DOM(該標籤節點複用)，但實際上，index所對應的值已經發生了改變，所以會產生錯亂的狀況。當若是new是添加到後面的話則不影響。

3. 若是不存在對數據的逆序添加、逆序刪除等破壞順序操做，僅用於渲染列表展現，使用index做爲key是沒有問題的。

附上文中例子的jsx代碼。

class Person extends React.Component {
    state = {
        persons: [
            { id: 1, name: 'yy', age: 18 },
            { id: 2, name: 'xx', age: 19 },
            { id: 3, name: 'zz', age: 20 },
        ]
    }
    add = () => {
        const { persons } = this.state;
        const p = { id: persons.length + 1, name: 'new', age: 22 }
        this.setState({ persons: [p, ...persons] })
    }
    render() {
        return (
            <div>
                <h2>展現人員信息</h2>
                <button onClick={this.add}>添加一個</button>
                <h3>用id做爲key</h3>
                <ul>
                    {
                        this.state.persons.map((personObj, index) => {
                            return <li key={personObj.id}>{personObj.name}---{personObj.age} <input type="text" /> </li>
                        })
                    }
                </ul>
                <hr />
                <h3>用index做爲key</h3>
                <ul>
                    {
                        this.state.persons.map((personObj, index) => {
                            return <li key={index}>{personObj.name}---{personObj.age} <input type="text" /> </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<Person />, document.getElementById('test'));
複製代碼