react Virtual Dom
时间:2021-07-12
本文章向大家介绍react Virtual Dom,主要包括react Virtual Dom使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
React Virtual Dom 二三事
React 及Angular 中都有VD 一说,他们是用来组织他们的组件,负责计算差别,然后将这些差异更新到Dom树上面。VD 于Dom他们的节点是一一对应的,但是他们的结构却是不一定一样。
- 如何创建一个VD 节点,也就是ReactNode,
- 第一种方法,jsx 或者调用React.createElement(), 这样就可以创建一个了一个ReactNode, 然后我们可以将这个节点放置到React VD 树上了,
- 如何将这个节点放置到树上,两种方式,第一个,如何我们已经有了一个VD的引用(例如,我们在一个组件的render方法里面,)那么我们可以直接将我们创建的节点作为这个引用的一部分,也就是说,我们创建的节点作为render 方法返回的一部分。第二个,如果没有这样的VD引用,那么我们可以直接调用React.render(ReactNode,htmlElement),那么我们就重新又创建了一颗React VD的子树,htmlElement,标记,我们的节点在这个htmlelement下面构建。
同学们,第一个方法是我们经常用的方法,我们经常以这种方式来写我们的业务逻辑,第二个方法,其实是我们App的主树,如果看一下我们的index.tsx,这个里面就会有这个方法,但是呢,我们可以用第二个方法凭空创建出一个ReactNode,然后呢,我们可以把它交给React,它负责给我们渲染更新到Dom树上了 - 再次强调一下React.render(ReactNode,htmlElement)这个方法的强大之处,它可以让我们非常自由的通过编程的方式,而不是通过React组件树的方式来添加一个节点。(有同学可能会问,这个有啥用,通过传统的方式,最大的限制就是我们得有一个爹,我们得有一个父亲节点,我们才能添加一个元素,有时候呢,我们可能处在VD树的一个很深的节点,然后我们希望展现一个通用组件,我不想在这个当前这个组件里面再次定义这个通用组件,一来是代码冗余,二来这样写代码太累)。这样一来这个方法就给我们提供了一种方案,非常的爽。
- 实战一下,Antd/rc里面有个Notification的组件,它有两种用法,一种就是弹出一个Dialog,里面的内容你自己参数传进去, 这种模式下,弹框里面的内容跟当前的调用组件完全无关,他们分别在两个不同的VD树上。第二种方法,useNotification()hook函数的方法,这个方法则是,Dom树完全隔离,VD树,你的内容部分跟调用者待在一起,有个很大的特点就是接收Context。
- 这边有个坑,我之前理解是,既然内容部分跟调用者在一起VD上,那么它就参与了调用者的刷新。然后我发现事实并非如此。第一,内容部分却是跟调用者在一起,第二,但是调用者setState(),它的土著内容却是刷新了,但是,notification的内容部分确没有刷新。为什么???,因为内容部分不是由调用者创建的,它是由外部传递进来的,所以当render方法再次调用时,这部分内容压根就没有变化过,所以,React 肯定不会触发setState,刷新内容部分。相当于内容部分是使用了React.memo(),或者是存放在了Ref里面一样。
- 这时我们可以得出几个结论,React 再做diff的时候,会先
原文地址:https://www.cnblogs.com/kongshu-612/p/15003990.html
- 算法模板——AC自动机
- UOJ #117. 欧拉回路
- 算法模板——左偏树(可并堆)
- 算法模板——二分图匹配
- Codevs2776 寻找代表元
- C#线程篇---解答线程之惑(2)
- webpack学习(三)html-webpack-plugin插件
- Codevs2018 反病毒软件
- 2953: [Poi2002]商务旅行
- 1230: [Usaco2008 Nov]lites 开关灯
- 【推荐】C#线程篇---你所不知道的线程池(4)
- 洛谷P1333 瑞瑞的木棍(欧拉回路)
- 【推荐】C#线程篇---Task(任务)和线程池不得不说的秘密(5.1)
- 【LeetCode 20】关关的刷题日记45 – Valid Parenthese
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux启动和重启nginx方法
- 简单谈谈centos7中配置php
- Linux动态链接库的使用
- Linux下部署springboot项目的方法步骤
- Linux、CentOS下安装zip与unzip指令功能(服务器)
- Linux上查看用户创建日期的几种方法总结
- 详解基于Linux的LVM无缝磁盘水平扩容
- CentOS平台实现搭建rsync远程同步服务器的方法
- CentOS 8设置自动更新的完整步骤
- linux 网络编程 socket选项的实现
- Ubuntu16.04安装Jenkins的方法图文详解
- leetcode树之对称二叉树
- linux 上在指定时间段内每隔多少分钟自动执行任务计划crontab
- 详解如何使用Spark和Scala分析Apache访问日志
- Centos 7.4中的远程访问控制的实现方法