React总结7:render()渲染时机

2023-11-16

根据官网表示,JSX是属于一种不可变的对象,即只要一创建就不能被改变,继续我们c++,Java中的字符串一样,是属于常量范围,不容许改变,不能改变属性啊,孩子节点也不可以改变,这个元素就像电影中的某一帧,是处于一个确定的时间点上,不管你放多少遍它都不会发生改变。

function tick() {
  const el = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toString()}.</h2>
    </div>
  );
  ReactDOM.render(
    el,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

通过这份代码大家就知道了,如果你要改变root容器中的内容,只能用render重新覆盖了。

这里大家需要知道一个常识,对于大多数React应用而言,React.render()通常只会调用一次,有趣,说好的需要覆盖重复调用呢。

在React建立和将内部的数据呈现给视图的过程中,React做了如下的事情:通过在真实DOM和React应用之间建立一个过渡层,这个过渡层有时被称为”虚拟DOM“。虽然不是DOM,但是有着和DOM一样的机制处理,几乎所有的操作都会先在虚拟DOM上进行处理,最后才更新到DOM节点上的

React渲染DOM节点时,只会渲染改变了的节点,如上面显示时间的代码,它只会更新大括号中的内容,其他的它不会改变,怎么实现的呢?

当组件的属性或者状态发生改变时,React会比较旧的DOM和新的DOM是不是不同,来确定更新当前DOM节点的必要性,如果不同的话,React就会更新这个DOM节点

这样非常有效的减少了reflow和repaint渲染,之所以可以这么做的原因,是因为他们是公共的根节点,就是说改变之前的节点的根节点和当前我要更新的根节点处于同一节点,我们通过递归比较就可以知道有没有发生改变。

在我们写代码的过程中我们可以通过一个函数去控制当前的组件是否需要进行更新,什么时候一定要更新,什么时候不更新。这个函数叫做shouldComponentUpdate生命周期更新函数,这个函数会发生在重新render视图渲染之前,此函数在React中默认是返回true,然后会执行render函数进行更新。

总结:

react render渲染的几种情况
1. 首次加载
2. setState改变组件内部state。 
注意: 此处是说通过setState方法改变。
3. 接受到新的props
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React总结7:render()渲染时机 的相关文章

  • java获取天气预报数据

    获取天气预报数据 对于做web项目有天气数据的需求 这个服务很合适 WebXml com cn 2400多个城市天气预报Web服务 包含2300个以上中国城市和100个以上国外城市天气预报数据 数据每2 5小时左右自动更新一次 准确可靠 提

随机推荐

  • Dr.COM 宽带认证客户端频繁掉线问题解决方案

    首先声明 查阅了网上好多博客 都是Bullshit 问题触发原因 因为使用了360wifi 据查资料显示 360wifi与Dr COM 宽带认证客户端 是不可以同时使用的 Dr COM 宽带认证客户端会将分享的IP反馈给服务器 受到服务器拒
  • gym 101505 CTU Open Contest 2016 G Orchard Division

    Problem codeforces com gym 101505 attachments vjudge net contest 187874 problem G Meaning 一个 m m 的网格 长 宽下标 0 m 1 里有 n 个点
  • 简述多线程的作用以及什么地方用到多线程

    1 多线程的作用 可以解决负载均衡问题 充分利用CPU的资源 为了提高Cpu的使用 采用多线程的方法去同时完成几件事情而互不干扰 2 大多数的情况下 使用多线程 主要是需要处理大量的IO操作或处理的情况需要花大量的时间等 3 iOS 有三种
  • MySQL 字段约束 null, not null, default, auto_increment

    转载自 http www xiaoxiaozi com 2009 07 09 1111 没有规矩 不成方圆 任何事物都是如此 在 MySQL 中 每个字段定义都包含附加约束或者修饰符 这些可以用来增加对所输入数据的约束 今天我们就来看一下
  • redis中hset和hmset区别

    Redis 中 hset 命令用于设置指定字段的值 它的格式如下 HSET key field value 其中 key 是键名 field 是字段名 value 是字段值 hmset 命令则用于一次设置多个字段的值 它的格式如下 HMSE
  • 人脸识别项目,从0到1的实现过程

    人脸识别项目 从0到1的实现过程 读取图片 灰度转换 尺寸修改 绘制矩形 人脸检测 多个人脸检测 视频检测 人脸录入 数据训练 人脸识别 项目下载地址 读取图片 代码 导入cv模块 import cv2 as cv 读取图片 img cv
  • Java-API简析_java.net.DatagramPacket类(基于 Latest JDK)(浅析源码)

    版权声明 未经博主同意 谢绝转载 请尊重原创 博主保留追究权 https blog csdn net m0 69908381 article details 132567946 出自 进步 于辰的博客 因为我发现目前 我对Java API的
  • 上证50ETF期权在的开户条件

    一 开户渠道 目前商场上的开户渠道一般分为两种 一是在券商 期货公司 正规交易所开户 二是通过第三方分仓平台开通 此类需认真辨别真假盘 避免上当受骗 二 上证50ETF期权在期货公司的开户条件 1 资金要求 个人投资者 申请开户前20个交易
  • 云原生-docker

    docker理念 docker解决的问题 docker解决了开发 部署各个环境的差异 将运行文档 配置环境 运行环境 运行依赖包 操作系统等都打一个镜像中整体交付 由原来的代码即应用转变的现在的镜像即应用 docker是解决了运行环境和配置
  • git status详解

    git status详解 在使用Git进行版本控制时 git status是一个非常有用的命令 用于查看当前代码仓库的状态 它可以告诉你哪些文件已更改 添加或删除 以及是否有未提交的更改等 本篇博客文章将详细解释git status命令的输
  • ROS2踩坑记录

    Vscode 显示 找不到module 以此选择 设置 Python 在setting json中编辑 在 python autoComplete extraPaths 中添加额外的第三方库路径 如 opt ros foxy lib pyt
  • 每日编程一题刷之有序数组的平方(暴力解法+双指针)

    每日编程一题刷之有序数组的平方 暴力解法 双指针 目录侠 文章目录 每日编程一题刷之有序数组的平方 暴力解法 双指针 题目链接以及描述 题解分析 双指针解法 小结 题目链接以及描述 977 有序数组的平方 力扣 LeetCode leetc
  • 快速搭建一个Web AR应用

    AR是增强现实的缩写 可以在真实世界的映像中叠加额外的信息来增强对现实的表达能力 最出名的一个AR应用就是精灵宝可梦了 玩家用手机在现实世界中捕捉宝可梦小精灵 通常AR应用可以根据不同的方式来对现实世界的映像进行处理 然后生成AR信息 例如
  • Findbugs工具的安装和使用

    今天了解到一个FindBugs工具 去百度了一下 这是一个静态分析工具 顾名思义 这个工具就是帮助我们去扫描Bug的 具体的功能就不赘述了 可以去百度 下面直接将安装的过程和使用吧 注 我刚开始的时候也是根据百度上面的提示去下载和安装Fin
  • VMWare删除虚拟机

    VMWare删除虚拟机 方法一 1 选中要删除的虚拟机操作系统 单击右键 选择 管理 选项 2 然后在选择 从磁盘中删除 选项即可删除该虚拟机操作系统 方法二 1 选中要删除的虚拟机操作系统 选择 VMware 软件最上方的 虚拟机 选项
  • SSH框架搭建的全过程(eclipse)

    SSH框架是最常用的框架之一 在搭建SSH框架的时候总有人遇到这样 那样的问题 下面我介绍一下SSH框架搭建的全过程 第一步 准备工作 下载好eclipse Struts2 Spring Hibernate 1 eclipse eclips
  • C语言-数组

    目录 一 一维数组 1 1 数组的创建 1 2 数组的初始化 1 3 一维数组的使用 1 4 一维数组在内存的存储 二 二维数组 2 1 二维数组的创建 2 2 二维数组初始化 2 3 二维数组使用 2 4 二维数组的存储 三 数组越界 四
  • 任意文件查看与下载漏洞

    任意文件查看与下载漏洞 一些网站的业务需求 可能提供文件查看或下载功能 如果对用户查看或下载的文件不做限制 就能够查看或下载任意的文件 可以是源代码文件 敏感文件等等 形成漏洞的原因 存在读取文件的函数 读取文件的路径用户可控且未校验或校验
  • 羊、狼、农夫过河

    题目来自 33条消息 羊 狼 农夫过河 华为OD真题 100 keven000777的博客 CSDN博客 题目内容 这个题目比较重要的地方就是农夫回程时不能携带动物 因此问题就稍微简单了一些 我拜读了这位老哥的文章 并在他的代码基础上修改了
  • React总结7:render()渲染时机

    根据官网表示 JSX是属于一种不可变的对象 即只要一创建就不能被改变 继续我们c Java中的字符串一样 是属于常量范围 不容许改变 不能改变属性啊 孩子节点也不可以改变 这个元素就像电影中的某一帧 是处于一个确定的时间点上 不管你放多少遍