js框架----react.js 9 React diffing算法

对比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脚手架