React Fiber的实现

在React之前的版本中,进行更新时是连续的,将会阻塞整个线程。如果此时有一些重要的任务,比如用户交互、动画等被阻塞时,体验显然是很差的。而有些更新实际并不用着急完成,比如根据网络请求结果更新的内容,或者发生在画面以外。React16为了解决这一问题,而提出了Fiber的核心架构。

继续阅读全文 »

React基于key的重排算法

我们知道,React在更新视图时,会比较新旧树的节点,计算出差异,然后根据差异来进行修改。对于同一层级的子节点,如果按顺序依次比较,发现不同则删去原有的,插入新的。这样虽然可行,但如果这一层只是更换了顺序,那么频繁地删除、插入节点,效率会很低。为了提高子元素对比的性能,React使用了基于key的算法,能够更好地复用已有的节点。

继续阅读全文 »

从CSS视觉格式化模型看盒模型

学习CSS的时候,大部分时间只是背属性,写写Demo,并没有真正系统地研究一些基础的原理,学到的还只是一些零碎的知识点。趁着有时间,通过查看w3c的官方文档,希望能从视觉格式化模型(Visual formatting model)的角度深入了解。本篇整理几个重要的知识点:盒模型,包含块,BFC,IFC。

继续阅读全文 »