紫圣

高级前端开发工程师 | 阿里互娱

获得徽章 11

赞

50

|

搜索文章

React 源码解读之class组件更新updateClassComponent (五)

执行完ClassComponent的三种更新后，updateClassComponent 最后执行了finishClassComponent()方法来判断是否需要 render，即是否需要渲染组件。

4年前
370
1
评论

React 源码解读之class组件更新updateClassComponent (五)

React 源码解读之class组件更新updateClassComponent (四)

ClassComponent实例已经存在，且已经是多次渲染，此时调用updateClassInstance方法执行更新操作，且会执行componentWillUpdate生命周期函数。

4年前
328
2
评论

React 源码解读之class组件更新updateClassComponent (四)

React 源码解读之class组件更新 updateClassComponent (三)

ClassComponent 是初次渲染时，调用 resumeMountClassInstance方法，复用ClassComponent实例，并更新state/props。

4年前
709
3
评论

React 源码解读之class组件更新 updateClassComponent (三)

React 源码解读之class组件更新 updateClassComponent (二)

ClassComponent实例未被创建时会调用 constructClassInstance方法构建class组件实例，然后调用mountClassInstance方法挂载class组件实例。

4年前
907
5
评论

React 源码解读之class组件更新 updateClassComponent (二)

React 源码解读之class组件更新 updateClassComponent (一)

当 workInProgress.tag 的类型为ClassComponent时，调用 updateClassComponent 函数对class组件分成三种情形执行更新操作。

4年前
306
1
评论

React 源码解读之class组件更新 updateClassComponent (一)

React源码解读之 commit 阶段

commit阶段的可以分为三个阶段，before mutation 、mutation phase 阶段(挂载阶段)、layout phase 阶段(布局阶段)。

4年前
1.1k
2
评论

React源码解读之 commit 阶段

React 源码解读之 setState 和 forceUpdate

setState和forceUpdate两者的更新流程相似，唯一的不同是执行forceUpdate时 update对象的tag属性值更改成了ForceUpdate。

4年前
3.5k
6
评论

React 源码解读之 setState 和 forceUpdate

React 源码解读之 ReactDOM.render

在执行ReactDOM.render时，主要是创建fiber和创建update。无论是首次还是多次调用，都会调用updateContainer函数创建update 来开启一次更新。

4年前
1.3k
6
评论

React 源码解读之 ReactDOM.render

React 算法应用之深度优先遍历

虚拟DOM是一棵树形结构，即fiber树，对于树的遍历，通常有两种方法：深度优先遍历和广度优先遍历。如果react使用深度优先遍历来遍历fiber树。

4年前
1.5k
6
3

React 算法应用之深度优先遍历

React 源码解读之 key 的作用是什么，能省略吗？

key 主要用于diff算法中，它是fiber对象的唯一标识，其作用是用于判断节点是否可复用，从而减少不必要的 diff，提高diff 的效率。因此，在开发中，我们应该主动设置key，尤其是在列表中。

4年前
2.1k
9
3

React 源码解读之 key 的作用是什么，能省略吗？

个人成就

文章被点赞 697

文章被阅读 322,876

掘力值 6,684

加入于

2019-05-31