對比VDOM

每次生成的VDOM，會與之前的對比，最小對比單位為標籤，已經存在的標籤，不會改變！！

使用案例

<script type="text/babel">
        class TimeComponent extends React.Component{

            state = {
                date:new Date()
            }

            componentDidMount(){
                setInterval(()=>{
                    let {date} = this.state
                    date = new Date()
                    this.setState({date})
                },1000)
            }

            render(){
                return (
                    <div>
                        <h1>測試Diffing</h1>
                        <input type="text" />
                        <span>當前時間:{this.state.date.toLocaleString()}</span><br/>
                        <span>只改變了span下的內容</span>
                    </div>
                )
            }

        }   
        ReactDOM.render(<TimeComponent/>,document.getElementById("test")) 
    </script>

面試題

react/vue中的key有什麼用？

唯一標識虛擬DOM物件節點，在對比新舊VDOM時，相當重要。
每次state改變，render重新產生虛擬DOM，產生的這些虛擬DOM與之前的對比：
根據key找到之前的VDOM，對比內容是否發生變化，沒變，則直接使用之前的真實頁面DOM；變化則將該VDOM的轉為真實DOM，放入頁面中。
根據key沒找到之前的VDOM，則為本次新建立的VDOM，則將其轉為真實DOM，放入頁面中。

遍歷列表時，為什麼key不能為索引值？

i. 對陣列進行，逆序新增、逆序刪除等破壞順序的操作時，會引發不必要的真實DOM更新，效率低
ii. 有輸入類的DOM節點時，介面出現混亂
iii. 若插入資料時，不破壞順序，則index作為key沒有問題。

key值如何選擇？

1. 使用資料的唯一標識，如id、手機號、學號等
2. 只是簡單的展示資料，用index作為key也是可以的。

練習

分別使用index作為key
id作為key 去遍歷陣列的資料；
點選按鈕再實現新增一個人，最後每一項加入input元件
檢視效果

分析如下程式碼，存在的問題：
對比每次產生的VDOM，解釋為什麼input元件混亂？

<script type="text/babel">
        class TimeComponent extends React.Component {

            state = {
                date: new Date(),
                people: [
                    { id: 1, name: "jack", age: "18" },
                    { id: 2, name: "tom", age: "17" }
                ]
            }

            componentDidMount() {
                setInterval(() => {
                    let { date } = this.state
                    date = new Date()
                    this.setState({ date })
                }, 1000)
            }

            add = () => {
                let { people } = this.state

                people.unshift({ id: people.length + 1, name: "lucy", age: "10" })

                this.setState({ people })
            }

            render() {
                return (
                    <div>
                        <h1>測試Diffing</h1>
                        <input type="text" />
                        <span>當前時間:{this.state.date.toLocaleString()}</span><br />
                        <span>只改變了span下的內容</span><br/>

                        <button onClick={this.add}>新增一個人</button>
                        <ul>
                            {this.state.people.map((e, idx) => {
                                return <li key={idx}>{e.id} - {e.name} - {e.age}<input type="text"/></li>
                            })}

                        </ul>

                    </div>
                )
            }

        }
        ReactDOM.render(<TimeComponent />, document.getElementById("test"))
    </script>

上一篇：js框架----react.js 8 React新版生命週期下一篇：js框架----react.js 10 React腳手架