React - visual dom

刺骨的言语ヽ痛彻心扉 2022-04-13 02:06 96阅读 0赞

假如react底层没有虚拟dom，那么如何处理state props变化，而重新render了？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

我对上面进行一下改进

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

下面这个算法比第一个要好一点，但是还是非常好性能，所以react提出了虚拟dom概念

**虚拟dom就是一个js对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]

为什么要提出虚拟dom,因为我们就是想把对dom的操作（非常消耗性能）变成对js对象的操作（低消耗）。

减少了对dom的创建和对dom的比较。

如何比较俩个虚拟dom的差异就是diff算法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220413/15e9d70df79647398b5394e31b937a03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220413/93cef617d9d44b61b50849c9b4a2d57f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220413/5c4816dd70324734a3442de412104407.png

发表评论取消回复

表情：

评论列表（有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

相关 React虚拟DOM浅析

在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtua

川长思鸟来/ 2022年05月27日 13:28/ 0 赞/ 147 阅读

相关 React之react-router-dom

1:一些区别 1. `react-router` React Router 核心 2. `react-router-dom` 用于 DOM 绑定的 React Rou

拼搏现实的明天。/ 2022年05月20日 06:08/ 0 赞/ 127 阅读

相关 react 虚拟dom

react 虚拟dom的优点：数据渲染到页面的方式： 1）.手动for循环整个数组； 2）.使用模板引擎；缺点：性能上的问题比

你的名字/ 2022年05月20日 02:53/ 0 赞/ 192 阅读

相关 React之虚拟DOM

React非常快速是因为它从不直接操作DOM。在React中，render执行的结果得到的并不是真正的DOM节点，而仅仅是JavaScript对象，称之为虚拟DOM。虚

Myth丶恋晨/ 2022年05月10日 08:52/ 0 赞/ 148 阅读

相关 React - Virtual Dom

详情看官网：[协调（Reconciliation）][Reconciliation] 别人的demo演示：[Demo][] 记得打开控制台看输出！！！一句话，记得在各个

矫情吗；*/ 2022年04月15日 02:57/ 0 赞/ 121 阅读

相关 React - visual dom

假如react底层没有虚拟dom，那么如何处理state props变化，而重新render了？ ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

刺骨的言语ヽ痛彻心扉/ 2022年04月13日 02:06/ 0 赞/ 97 阅读

相关 React路由react-router-dom

文档分享 [react-router][] [react-router-dom][] [Ant Design of React][] [webpack配置Re

Myth丶恋晨/ 2022年02月26日 12:46/ 0 赞/ 229 阅读

相关 react渲染dom

第一步：导入包运行：cnpm i react react-dom -S ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

╰半橙微兮°/ 2021年12月14日 02:23/ 0 赞/ 259 阅读

相关 react ref实现dom操作

ref两种写法添加ref后,将使用js的方式来操作标签第一种: (1)在构造函数中声明 this.

柔光的暖阳◎/ 2021年07月25日 02:35/ 0 赞/ 407 阅读

相关 react 虚拟dom

1、state数据+jsx模板(标签)生成虚拟dom来描述真实dom(js对象),第一次时是损耗性能 <div id='abc'><span>hel

左手的ㄟ右手/ 2021年07月24日 13:48/ 0 赞/ 329 阅读