《React技术揭秘-理念篇》读后感

本文是<React技术揭秘-理念篇>的概括，大部分是摘录于卡颂的React源码分析网站，从理念到架构，从架构到实现，从实现到代码，分析的很详尽，有兴趣可以去学习学习。

React理念：构建快速响应的大型web应用

如何理解React理念？

A. 速度快
速度比的是渲染速度，和vue相比，vue使用的是模版语法，所以在编译期就可以找到需要变化的部分，而react使用的是jsx，具有高灵活性与不确定性，难以在编译期找到变化的部分，所以React在运行期做出了更多努力:
1.PureComponent 或 React.memo 构建组件
2.使用shouldComponentUpdate生命周期
3.渲染列表时使用key
4.使用useCallback和useMemo缓存数据和变量

B. 响应自然
React给到的回答：将人机交互的研究结果整合进UI

关于响应自然，抛出了一个常见问题：当组件进行更新时，有时会影响UI的绘制，给人感觉页面卡顿。

原因：主流浏览器每次刷新的频率为60Hz，即16.6ms刷新以一次，且GUI渲染线程和js线程互斥，所以需要在16ms内逐个完成 JS脚本、样式布局、样式绘制 这三个工作，当JS脚本执行时间超过16ms，就没时间进行GUI渲染了，即看到的画面卡顿。

解决思路：每一帧时间中预留一些时间给JS线程(源码里写的是5ms)，React利用这段时间更新组件，当时间不够用时，React将线程控制权交还给GUI渲染线程，React等待下一帧再继续之前被中断的工作。

---

React为什么从v15升级到v16？

正是因为React15架构无法满足React的理念。

React15架构分为两层，Reconciler(负责找出变化的组件)和Renderer(负责将变化的组件渲染到页面)，在React15及以前，Reconciler采用递归的方式创建虚拟DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间造成卡顿。

为了解决这个问题，React16进行了重构升级到了v16，React16的架构分为三层，Scheduler(负责调度任务)、Reconciler、Renderer。将递归的 无法中断的递归更新⚠️ 重构为 异步可中断的循环更新♻️，每次循环都会判断当前是否有剩余时间，这就是全新的Fiber架构。

---

Fiber架构是什么？

代数效应：函数式编程中的概念，用于将副作用从函数调用中分离

React核心成员Sebastian Markbåge(Hook发明者)曾说：我们在React中做的就是践行代数效应，而Fiber架构就是代数效应的体现。

Fiber架构实现了一套状态更新机制。支持任务不同优先级，可中断与恢复，并且恢复后可以复用之前的中间状态。其中每个任务更新单元为React Element对应的Fiber节点。

Fiber节点可以保存对应的DOM节点，Fiber树就对应DOM树，React使用双缓存技术(在内存中构建并直接替换)来完成Fiber树的构建与替换—————DOM树的创建与更新。

---

总结
本来只是想学习一下react源码。结果发现那些知识对我来说都很新鲜。所以不自觉地就陷进去了，无奈整个知识树又有点绕人🧶🧶,所以这次挑了文中的几个重点进行了搬运分享，解释了react的理念和react版本升级的前因后果。感觉自己对react了解又多了几分🌟