紫圣

React 中实现代码分割的四种方式：import、React.lazy、import + React Loadable、UmiJs按需加载

reconciler 的过程可分为四个阶段，分别是任务输入阶段、调度任务注册阶段、执行任务回调阶段，输出DOM节点阶段。这四个阶段，基本覆盖了react-reconciler的核心逻辑。

Component 和 PureComponent都是通过构造函数声明类，但PureComponent实现了 shouldComponentUpdate 方法。

useFiber函数的作用是克隆旧节点，从而复用旧节点。在克隆旧节点时，是通过 双缓冲 的方式来复用旧节点。

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

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

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

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

类似Tinder和探探的卡片效果的组件，社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果，就是类似我的女神邱淑贞这样。 其实我最早实现这个效果，是在2018年的时候，在weex上实现过一版。原帖请看这里：https://zhuanlan.zhihu…