React虚拟DOM的diffing算法。

最新推荐文章于 2022-10-27 21:34:02 发布

马德里甜欣

最新推荐文章于 2022-10-27 21:34:02 发布

阅读量117

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51564923/article/details/123539284

版权

真实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的作用，减少页面的重绘了。优化性能绝绝子。

马德里甜欣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React虚拟DOM的diffing算法。

真实dom每次都要对页面进行重排重绘，非常消耗性能，这时我们就用到diff算法了，通过计算哪个dom变了，哪个dom没变，来只对变了的dom进行改变，其他的不动来减少性能的消耗，下面通过一个每秒显示时间的案例更清楚地看一下，diff算法是怎么回事。<body> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <scri
复制链接

扫一扫