React生命周期和响应式原理(Fiber架构)
注意:只有类组件才有生命周期钩子函数,函数组件没有生命周期钩子函数。
生命周期
- 装载阶段:constructor() render() componentDidMount()
- 更新阶段:render() componentDidupDate()
- 卸载阶段:componentWillUnmount()
(面试题)shouldComponentUpdate()
- 返回true时,正常进入更新阶段,返回false时,不进入更新阶段。
- this.$forceUpdate()这个方法调用,会绕过shouldComponentUpdate(),一定会 进入更新阶段。
- shouldComponentUpdate()一般用于性能调优,阻塞掉哪些不参与视图渲染的变量更新导致的(Fiber)生成。
- shouldComponentUpdate()只有在类组件Component中才有用,在PureComponent中没用。
React组件的渲染(更新)流程
由两个阶段构成,一个是render阶段,一个是commit阶段。
render阶段: 目标是生成Fiber树,这个过程是异步的,可以中断的,并且不执行任何副作用。
commit阶段:目标是把协调运算的结果,一次性提交渲染(更新)成真实DOM,这个过程在React(v17)是不可中断的,在React(v18)中可以人为的中断(由startTransitansition进行中断)
React响应式原理(Fiber架构)
什么是Fiber单元
每一个JSX元素节点都是一个Fiber单元(React.creatElement()的返回值)
为什么React要构建复杂的Fiber树
为了让协调运算,commit阶段可以循环执行,而不是递归
怎么执行协调运算
没个Fiber单元上都有一个alternater指针,指向旧Fiber中的自己。如果新的Fiber树存在,但旧的Fiber树不存在,说明新增节点;如果新的Fiber树不存在,但旧的Fiber树存在,说明这个节点是要删除的节点;如果新旧Fiber树都存在这个节点,进一步遍历新旧节点的属性,对比新旧节点的变化。
这些独立的Fiber单元是怎么串联成Fiber树
给每个Fiber单元添加(child,sibling,parent)指针
React生命周期和响应式原理(Fiber架构)的更多相关文章
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- vue 源码自问自答-响应式原理
vue 源码自问自答-响应式原理 最近看了 Vue 源码和源码分析类的文章,感觉明白了很多,但是仔细想想却说不出个所以然. 所以打算把自己掌握的知识,试着组织成自己的语言表达出来 不打算平铺直叙的写清 ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- react生命周期方法有哪些?
react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...
- 一探 Vue 数据响应式原理
一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
随机推荐
- String、StringBuilder、StringBuffer——JavaSE基础
String.StringBuilder.StringBuffer String不可变 StringBuilder与StringBuffer均可变 StringBuilder线程不安全,效率高,常用 ...
- linux运维基础2
内容概要 虚拟机关键配置名词解释 远程链接工具 xshell基本使用 linux命令准则 系统运⾏命令 常用快捷方式 文件命令操作 文件编辑命令 内容详情 虚拟机关键配置名词解释 # 虚拟网络编辑器说 ...
- 在生产中部署ML前需要了解的事
在生产中部署ML前需要了解的事 译自:What You Should Know before Deploying ML in Production MLOps的必要性 MLOps之所以重要,有几个原因 ...
- Spring Boot 实践 :Spring Boot + MyBatis
Spring Boot 实践系列,Spring Boot + MyBatis . 目的 将 MyBatis 与 Spring Boot 应用程序一起使用来访问数据库. 本次使用的Library spr ...
- 使用c++爬取股市数据,获取最新行情
最近自己动手写个小软件(界面原生态,还没来得及加样式哈).每天看看潜力股懒人做法,不介意推荐.资源有限,只能观察一下低价股,分析一下运动规律,什么时候拉升,惯性如何 主要功能:读取网络数据:保存本地数 ...
- NC15979 小q的数列
NC15979 小q的数列 题目 题目描述 小q最近迷上了各种好玩的数列,这天,他发现了一个有趣的数列,其递推公式如下: \[f[i] = \left\{ \begin{array}{l} 0 ,&a ...
- 《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(2)-初识Fiddler让你理性认识一下
1.前言 今天的理性认识主要就是讲解和分享Fiddler的一些理论基础知识.其实这部分也没有什么,主要是给小伙伴或者童鞋们讲一些实际工作中的场景,然后隆重推出我们的猪脚(主角)-Fiddler. 1. ...
- 写了个 Markdown 命令行小工具,希望能提高园友们发文的效率!
写了个 Markdown 命令行小工具,希望能提高园友们发文的效率! 前言 笔者使用 Typora 来编写 Markdown 格式的博文,图片采用的是本地相对路径存储(太懒了不想折腾图床). 时间久了 ...
- Tapdata 携手精诚瑞宝,共拓 Real Time DaaS 蓝海市场
2021年10月22日,深圳钛铂数据有限公司「Tapdata」 与精诚瑞宝计算机系统有限公司「精诚瑞宝」战略合作签约仪式在深圳举行,Tapdata 创始人唐建法先生与精诚瑞宝副总经理余灿雄先生签署 ...
- scanf读入与printf输出
作为一个资深$cin,cout$玩家,在多次因为$cin$太慢被吊打后,开始反思有必要认真地学一下$scanf$和$printf$了$\cdot \cdot \cdot$ 格式 $scanf( &qu ...