深入了解React组件重新渲染的条件和生命周期

React组件rerender的真正条件

  1. 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender

  2. 组件的props中的任一属性的值有变化(即使这个任一属性的值是对象,变化的仅仅是该对象中的某属性的值,此刻也算props发生了变化)且当前组件的shouldcomponentupdate return true时且当期组件所有父级以上组件的shouldcomponentupdate return true,当前组件才会re-render

  3. 当前组件的shouldcomponentupdate即使返回false,当前组件里子组件若满足1中的条件,这个子组件依然会重新渲染

各个生命周期的深层含义

shouldComponentUpdate

触发时机1:

when new props(当props中某属性的值为对象时,该对象中某属性值发生了变化,也会触发该函数的调用) are being received且所有父级组件的shouldComponentUpdate得返回true当前组件才会触发该回调

触发时机2:

即使所有父级组件的shouldComponentUpdate返回false,当前组件的state有变化,当前组件的该回调依然会触发

默认值

Defaults to true. This method is not called for the initial render or when forceUpdate() is used

其他情况

if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked

componentWillReceiveProps

触发时机1:

当当前组件的props某属性有变化时(包括这种情况:当props中某属性的值为对象时,该对象中某属性值发生了变化)且所有父级以上组件的shouldComponentUpdate返回true(当前组件的shouldComponentUpdate是否返回true不重要)时当前组件的该回调才会触发调用

触发时机2:

即使当前组件的shouldComponentUpdate return false且当前组件没有props的更新,父级组件re-render了,当前组件该函数还是会触发调用

组件第一次渲染完成:mounting

mouting含义

whenever the Clock is rendered to the DOM for the first time. This is called "mounting" in React

在组件内相应回调函数叫componentDidMount() componentWillMount

组件被销毁时:Unmounting

whenever the DOM produced by the Clock is removed. This is called "unmounting" in React

在组件内相应回调函数叫componentWillUnmount()

组件正在被重新渲染: Updating

在组件内相应回调函数叫componentWillUpdate componentDidUpdate


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对怀孕的人有害的食物。。。朋友们记住咯!(欢迎转载)

有几个同事和朋友要生BB啦,好东东,转给你们提前学习一下~ 容易流产食物: 1、螃蟹:它味道鲜美,但其性寒凉,有活血祛瘀之功,故对孕妇不利,尤其是蟹爪,有明显的堕胎作用。 2…

Vss服务端用户存在,但客户端登陆不进去

打开客户端Vss提示“Cannot find SS.INI file for user userName”,这个错误是找不到用户userName的SS.INI文件。 解决办法 在服务器上找到Vss共享的文件夹,打开此文件夹下的users文件夹,然后找到userName文件夹打开后: 如果没有SS.INI文件&a…

Hystrix中的批量(折叠)请求

Hystrix具有折叠(或批处理)请求的高级功能。 如果两个或多个命令同时运行相似的请求,Hystrix可以将它们组合在一起,运行一个批处理请求,并将拆分结果分派回所有命令。 首先让我们看看Hystrix如何工作而不会崩溃。 假设…

C#繁简转换

//1.using System.Runtime.InteropServices; //2.import kernel32.dll [DllImport("kernel32.dll",EntryPoint "LCMapStringA")]    public static extern int LCMapString(int Locale,int dwMapFlags,byte[] lpSrcStr,int cchSrc,byte[] lpDestStr,…

css笔记 2

定义一个类选择器.center {text-align: center} h1 有 center 类。这意味将遵守 ".center" 选择器中的规则。<h1 class"center">This heading will be center-aligned</h1> 类名的第一个字符不能使用数字&#xff01; 派生选择器td.fancy {…

合并购物车

合并购物车逻辑分析 合并方向&#xff1a;cookie 购物车数据合并到 Redis 购物车数据中。合并数据&#xff1a;购物车商品数据和勾选状态。合并方案&#xff1a; Redis 数据库中的购物车数据保留。如果 cookie 中的购物车数据在 Redis 数据库中已存在 将 cookie 购物车数据覆盖…

Swing和JavaFX:使用JFXPanel

我很快将不得不在基于Swing的胖客户端中处理JavaFX –哦&#xff0c;对不起&#xff0c;我的意思是“多层富客户端”&#xff01; 因此&#xff0c;这使我来看看JFXPanel 。 JFXPanel是一个javax.swing.JComponent&#xff0c;用于将JavaFX内容嵌入到Swing-UI中。 JFXPanel的用…

关于nodejs中npm命令没有反应的解决方法

最近在学习angularJS&#xff0c;正在做一个单页面应用&#xff0c;在安装nodejs之后&#xff0c;发现命令行传了输入npm -v能输出结果外&#xff0c;其余npm的任何操作都没有反应&#xff0c;一开始我以为是下载的比较慢&#xff0c;等了半小时还是没动静&#xff0c;只有下标…

Red Hat Enterprise 5 server 上安装 memcached 的问题记录

国内私募机构九鼎控股打造APP&#xff0c;来就送 20元现金领取地址&#xff1a;http://jdb.jiudingcapital.com/phone.html内部邀请码&#xff1a;C8E245J &#xff08;不写邀请码&#xff0c;没有现金送&#xff09;国内私募机构九鼎控股打造&#xff0c;九鼎投资是在全国股份…

统计一个panel中lable的个数

int n panel.Controls.OfType<Label>().Count();转载于:https://www.cnblogs.com/linji/archive/2012/09/20/2694640.html

Java扩展机制可加载所有JAR

Java扩展机制在Java教程中被描述为“一种标准的&#xff0c;可伸缩的方式&#xff0c;以使自定义API可供Java平台上运行的所有应用程序使用。” 如了解扩展类加载中所述 &#xff0c;“扩展框架利用类加载委托机制”&#xff0c;其中扩展类在rt.jar &#xff08;和相关的JAR&am…

js中的 return false;

总的来说return false 的作用就是阻止事件的默认行为 1、 function check() { if(form.title.value"") { alert("请输入文章标题!"); return false; //注意不能写成 return(false); } if(form.content.value"") { alert("文章正文不能为空…

C++的文艺复兴: Why C++? 王者归来

因为又有人叫我去Quora的C2C站去回答问题了&#xff0c;这回是 关于 《2012 不宜进入的三个技术点ActionScript&#xff0c;Thread 和 C&#xff0c; C争议的争议最大。(要我说&#xff0c;.NET比C更需要慎重进入&#xff0c;呵)。我就在这里回复一下这个问题吧。 正好我前段时…

PAT_B_1012 数字分类 (有待改进)

题目描述&#xff1a; 给定一系列正整数&#xff0c;请按要求对数字进行分类&#xff0c;并输出以下 5 个数字&#xff1a; A​1​​ 能被 5 整除的数字中所有偶数的和&#xff1b; A​2​​ 将被 5 除后余 1 的数字按给出顺序进行交错求和&#xff0c;即计算 n​1​​ −n…

Drools和jBPM KIE A​​pps平台

随着Drools和jBPM&#xff08;KIE&#xff09;6系列出现了一个新的工作台&#xff0c;并有望最终实现用户的可扩展性。 我终于有了一些预告片&#xff0c;以显示此工作原理以及所存储的内容。 确保选择1080p并全屏显示&#xff0c;以达到最佳效果。 &#xff08;点击放大&…

js 严格模式

一、概述 除了正常运行模式&#xff0c;ECMAscript 5添加了第二种运行模式&#xff1a;"严格模式"&#xff08;strict mode&#xff09;。顾名思义&#xff0c;这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的&#xff0c;主要有以下…

软件工程之系统建模

1、系统工程&#xff1a; 软件工程由系统工程演变而来&#xff0c;要了解软件工程应先了解系统工程。系统工程一般通过自顶向下、自底向上的方法&#xff0c;用层次结构来来分析整个系统。在系统工程层次图中自顶向下依次是全局视图&#xff08;业务或产品域&#xff09;——领…

采访田飞师兄有感 ——by 李皈颖

来MSRA后一个月了&#xff0c;终于迎来了现代软件工程&#xff0c;开课第一天&#xff0c;殷老师&#xff08;也是我的“馒头”&#xff09;要求我们去采访一下前任师兄&#xff0c;了解一下他们的感受。我们组联合采访了陈凯师兄&#xff0c;但是因为我忘记了&#xff0c;所以…

不要在facelets中重复表情

您是否曾经在JSF中看到过像这样的重复EL表达式&#xff1f; <h:inputText value"#{oneBean.name}" rendered"#{anotherBean.showPerson}"/> <h:inputText value"#{oneBean.birthday}" rendered"#{anotherBean.showPerson}"/…

模态对话框和全选反选

一、目标 制作一个表格&#xff0c;第一行分别为选择、主机名和端口增加一个按钮&#xff0c;名称为添加点击添加按钮&#xff0c;出现一个半透明的遮罩层&#xff0c;遮罩层中间有个弹出框弹出框中有两个输入框&#xff0c;分别为主机名和端口&#xff0c;还有两个按钮&#…