React虚拟DOM的diffing算法。-CFANZ编程社区

React虚拟DOM的diffing算法。

真实dom每次都要对页面进行重排重绘，非常消耗性能，这时我们就用到diff算法了，通过计算哪个dom变了，哪个dom没变，来只对变了的dom进行改变，其他的不动来减少性能的消耗，下面通过一个每秒显示时间的案例更清楚地看一下，diff算法是怎么回事。

<body>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="test"></div>
    <script type="text/babel">
        //React通过diffing算法，只更新部分的变化
        function tick(){
            const vDom =(
            <div>
                <h1>time</h1>
                <h2>{new Date().toLocaleTimeString()}</h2>
            </div>
        )
        ReactDOM.render(vDom,document.getElementById("test"))
        }
        setInterval(tick,1000)
    </script>
</body>

把vDOM全都放在容器中了，但是time是不变的，只有date时间每秒在改变

很清楚的展示了虚拟dom的作用，减少页面的重绘了。优化性能绝绝子。