共计 5 篇文章

React生命周期

古人云:“以史为镜,可以知兴衰”。因此,我们从React 15开始拆解React生命周期 一、React 15生命周期 1、挂载阶段(Mounting) 挂载阶段在组件的一生中仅执行一次,在这个过程中,组件被初始化,接着被渲染到真实的DOM中,完成“首次渲染”。也就是页面刚打开时组件完成初始化渲染的过程。它会按顺序执行下面的过程: ...

虚拟DOM是为性能而诞生的吗?

同样的,我们还是以问题的形式开启虚拟DOM的探索 Q1: “虚拟`DOM`是什么?” - what A: “是JS和DOM之间的一个映射缓存” A: “在形态上表现为一个能够描述DOM结构及其属性信息的JS对象” 若对上述问题存在疑惑,可以先学习JSX的三个“大问题” 这一小节的内容 Q2: “`React`中的虚拟`DOM` ...

JSX的三“大问题”

JSX作为React框架的一大特色,它与React本身的运行机制存在着千丝万缕的联系。在揭开这层“联系”的面纱之前,我们先尝试思考关于JSX的三个“大问题”: JSX和JS之间的关系是什么?它的本质是什么? React选用JSX的动机是什么?它解决了什么问题? JSX背后的功能模块是什么?它做了什么? 下面,我们通过问题去摸索JSX背后的一个个小故事,了解它的源头。 一、JSX的本质 React官网给了定义: JSX ...

React 整体感知

当我们由浅入深地认知一样新事物的时候,往往需要遵循 Why > What > How 这样一个认知过程。它们是相辅相成、缺一不可的。而了解了具体的 What 和 How 之后,往往能够更加具象地回答理论层面的 Why,因此,在进入 Why ...

React fiber源码理解

前言 我们知道,React Fiber是React v16中新的reconciliation引擎,是React团队用时2年对Stack Reconciler版本的核心算法进行的重写。它的主要目标是实现虚拟DOM的增量渲染,可以将渲染工作拆分成块并将其分散到多个帧的能力。在新的更新到来时,可以暂停、中止或复用工作的能力,可以为不同类型的更新分配优先级顺序的能力。这是React设计的一种体现,相比于业界一些流行库在计算更新时采用的“push”方法,React坚持“pull”方法从而延迟到必要时进行计算。 ...