sqfbeijing / articles Goto Github PK

cssnano/cssnano#361

请看这个例子: https://github.com/sqfbeijing/articles/blob/master/assets/htmls/react-babel.html

/**
 * 本例子说明: React17以前的版本会有此问题:
 * 由于React事件是绑定在dom上的，而非「react-root」节点上，那么react事件必然会经过「main」节点(react-root和document之间的节点)
 * 如果这些节点有原生js或者jqeury之类的代码阻止了事件冒泡，那么势必会影响React应用，引起bug
 * 而React17不会再有此类问题。
 */

文章: https://www.bigbinary.com/blog/react-17-delegates-events-to-root-instead-of-document

相关文章

https://github.com/acdlite/react-fiber-architecture 此文中将fiber类比于函数的调用栈，很多术语都使用调用栈的概念来进行类比。

• Reconciliation is the algorithm behind what is popularly understood as the "virtual DOM."
• The reconciler does the work of computing which parts of a tree have changed; the renderer then uses that information to actually update the rendered app. // 协调器计算哪些部分改变了，渲染器用这些信息进行更新app
• requestIdleCallback 在空闲期安排一个低优先级的函数进行执行，requestAnimationFrame: 安排在下一个动画帧上调用的高优先级函数, 但若想充分使用这2个api，前提是「break rendering work into incremental units」，能够可中断地增量更新，而非将函数调用栈完全执行完毕。
• Fiber: 可视为虚拟的堆栈帧。「You can think of a single fiber as a virtual stack frame.」

fiber是什么?

In concrete terms, a fiber is a JavaScript object that contains information about a component, its input, and its output.
A fiber corresponds to a stack frame, but it also corresponds to an instance of a component.

优先级 pendingWorkPriority

lane模型中有对应的work的优先级

react-scheduler

由于requestIdleCallback兼容性问题，所以官方自己实现react-scheduler(postmessage + requestAnimationFrame)来模拟requestIdleCallback。

brickspert/blog#26 React Hooks 原理

链表与数组对比

• 数组静态分配内存，链表动态分配内存;
• 数组在内存中连续，链表不连续;
• 数组元素在栈区，链表元素在堆区;
• 数组利用下标定位，时间复杂度为O(1)，链表定位元素时间复杂度O(n);
• 数组插入或删除元素的时间复杂度O(n)，链表的时间复杂度O(1);

为何要使用链表遍历 Fiber 树？

参考这篇文章，https://indepth.dev/posts/1007/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree。 就是说用链表可以暂停组件的更新工作，并且在后续的某个时间段内恢复它。 React 会一直通过这种方式来遍历, 直到处理完所有的组件并且调用栈为空。

If you rely only on the [built-in] call stack, it will keep doing work until the stack is empty…Wouldn’t it be great if we could interrupt the call stack at will and manipulate stack frames manually? That’s the purpose of React Fiber.Fiber is re-implementation of the stack, specialized for React components. You can think of a single fiber as a virtual stack frame.

开源hooks集

• https://github.com/streamich/react-use/
• 阿里 ahooks

相关链接

https://juejin.cn/post/6844903946222321671#comment
「react进阶」一文吃透react-hooks原理

相关链接

https://github.com/BetaSu/react-on-the-way
https://www.sytone.me/build-your-own-react [译]Build your own react
https://pomb.us/build-your-own-react/
https://vimcoding.com/2020/08/09/%E6%9E%84%E5%BB%BA%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84React/

https://github.com/BUPTlhuanyu/ReactNote 源码图

使用协调器
https://github.com/facebook/react/tree/main/packages/react-reconciler
https://agent-hunt.medium.com/hello-world-custom-react-renderer-9a95b7cd04bc

相关文章

https://juejin.cn/post/7010539227284766751#heading-0
https://github.com/7kms/react-illustration-series
react防止xss 攻击以及babel转义过程: https://www.zoo.team/article/xss-in-react