React组件rerender的真正条件

当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true，那么当前组件会rerender
组件的props中的任一属性的值有变化(即使这个任一属性的值是对象，变化的仅仅是该对象中的某属性的值，此刻也算props发生了变化)且当前组件的shouldcomponentupdate return true时且当期组件所有父级以上组件的shouldcomponentupdate return true，当前组件才会re-render
当前组件的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

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

Spring框架学习day_02:组件扫描 / 注解内部读解 / 组件扫描中配置作用域和生命周期 / 解耦 / 自动装配(两种方式) / 读取文件
1. 组件扫描首先,必须让Spring扫描组件所在的包,并且,组件类的声明之前必须添加@Component注解! 其实,除了@Component注解以外,还可以使用以下注解实现同样的效果: @Con ...
[react] react中调用setState会更新的生命周期有哪几个？
[react] react中调用setState会更新的生命周期有哪几个? (>=16.4之后,与props的更新一致, <16.4的版本没有static getDerivedStateF ...
Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件与父组件传递数据给子组件 -- 方式props ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
react 生命周期
1.组件从创建到死亡它会经历一些特定的阶段. 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用. 3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作. 一 ...
React生命周期(包含新旧流程图对比)
React生命周期文章目录 React生命周期对于生命周期的理解重要的生命周期勾子废弃的勾子生命周期流程图(旧) 生命周期流程图(新) React 16.8以后的生命周期分为三个阶段,分别是 ...
React组件-事件、状态和生命周期
组件状态事件 (事件名大写) 注意:组件事件需要配合状态,所以现在无法呈现效果 class Cmp1 extends React.Component{constructor(...args){sup ...
React 深入系列４：组件的生命周期
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...

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

React组件rerender的真正条件

各个生命周期的深层含义

shouldComponentUpdate

触发时机1：

触发时机2：

默认值

其他情况

componentWillReceiveProps

触发时机1：

触发时机2：

组件第一次渲染完成：mounting

mouting含义

组件被销毁时：Unmounting

组件正在被重新渲染: Updating

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

最新文章

热门文章