共计 1403 个字符，预计需要花费 4 分钟才能阅读完成。
本文是 <React 技术揭秘 - 理念篇 > 的概括，大部分是摘录于卡颂的 React 源码剖析网站，从理念到架构，从架构到实现，从实现到代码，剖析的很详尽，有趣味能够去学习学习。
React 理念：构建疾速响应的大型 web 利用
如何了解 React 理念？
- 速度快
速度比的是渲染速度，和 vue 相比，vue 应用的是模版语法，所以在编译期就能够找到须要变动的局部，而 react 应用的是 jsx，具备高灵活性与不确定性，难以在编译期找到变动的局部，所以 React 在运行期做出了更多致力:
1.PureComponent 或 React.memo 构建组件
2. 应用 shouldComponentUpdate 生命周期
3. 渲染列表时应用 key
4. 应用 useCallback 和 useMemo 缓存数据和变量
- 响应天然
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 源码。后果发现卡颂写的货色对我来说简直都是 fresh new knowledge。所以不盲目地就陷进去了，无奈整个常识树又有点绕人????????, 所以这次挑了文中的几个重点进行了搬运分享，解释了 react 的理念和 react 版本升级的前因后果。感觉本人对 react 理解又多了几分????
