just-react
just-react copied to clipboard
BetaSu
「React技术揭秘」 一本自顶向下的React源码分析书
[beforeMutation阶段](https://react.iamkasong.com/renderer/beforeMutation.html) 就讲过，before mutation阶段在scheduleCallback中调度flushPassiveEffects 而在[layout阶段](https://react.iamkasong.com/renderer/layout.html#%E6%A6%82%E8%A7%88) 说 > 对于FunctionComponent及相关类型，他会调用useLayoutEffect hook的回调函数，调度useEffect的销毁与回调函数 光从以上两段论述中，是不是可以说 useEffect的相关回调在beforeMutation和layout两个阶段都被调用了啊 17.0.2源码我大概看了下 对应位置的代码似乎变成了： ``` case FunctionComponent: case ForwardRef: case SimpleMemoComponent: case Block: { // At this point layout effects have already...
 卡子哥，我知道你想表达的是旧架构栈调和 无法实现“可中断异步更新”，但是关于" **Reconciler和Renderer是交替工作的，当第一个li在页面上已经变化后，第二个li再进入Reconciler** " 这一句话的表述是否存在问题呢？  以上来自 陈屹的《深入 React 技术栈》，针对的是 React15。  以上是官方文档对旧架构栈调和的实现说明：https://zh-hans.reactjs.org/docs/implementation-notes.html。 综上所述，我的理解是：**Reconciler和Renderer是交替工作的，但是在一次更新中 协调器Reconciler 工作结束后才是渲染器 Render 工作，当渲染器处理 第一个li在页面上的变化，紧接着就会处理第二个li在页面上的变化，如果这时候中途中断更新会看见不完整的变化，但实际上旧架构 Reconciler 和 Render 一起工作，并且各自是不可中断的，是一个长任务，导致帧的 Layout / Paint 缺失，也就是掉帧，给用户的体验就是卡顿，新架构启用 fiber，使得Reconciler工作异步可中断，长任务分割为短任务，保证页面渲染不掉帧，Render 同步工作，保证页面变化完整性**。...
 卡子哥，这节代数效应与Fiber中的描述是否有误？ 所谓代数效应就是解耦程序逻辑和具体实现，目的是： - 避免由内而外的层层污染，传染调用方函数 - 避免由外而内的层层传递，复杂化中间函数 以上信息参考： https://mongkii.com/blog/2021-05-08-talk-about-algebraic-effects/ https://overreacted.io/zh-hans/algebraic-effects-for-the-rest-of-us/ JS 中并没有代数效应的概念，Generator 污染外层函数也没有践行代数效应的理念，正因此 React 自己实现 Fiber，作为协程的一种实现，并且践行了代数效应，算是对 JS 的一种扩展。 结论：“所以，我们可以将纤程(Fiber)、协程(Generator)理解为代数效应思想在JS中的体现” 应该修改为 “所以，我们可以将纤程(Fiber)理解为代数效应思想在JS中的体现”。 不知描述是否有误，请多指教！
这里的fiberRootNode应该是rootFiber吧，虽然fiberRootNode在此时确实有current属性，但是这个函数里的current指代的实际上应该是alternate吧
 “在阐述新React架构特点时，Scheduler到Reconciler的工作时说如果有更高优任务需要先更新或者当前帧的时间没有剩余时间，步骤会中断，renderer后用户也不会看见更新不完全的DOM”。 这种描述是不是有问题？ 如果有更高优先级的任务需要先更新，会中断去redenerer高优先级的任务，那么当前的任务在当前帧实际上没有更新，那用户看到的是依然是更新不完全的DOM界面，只能说同一优先级的任务会一起更新到同一帧，不同优先级不保证 ，这样理解对不对？
[update 树结构](https://react.iamkasong.com/hooks/create.html#update%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84)  这一块的描述看的我云里雾里，例子中就给出来 u1, u0 两个 update，不够生动， 建议描述大于2个 update 的情况。 当我自己画出来的时候，一切都清晰了。
新创建的文件yarn link react react-dom时报警告 warning ../../../package.json: No license field
