just-react
just-react copied to clipboard
BetaSu
「React技术揭秘」 一本自顶向下的React源码分析书
/Users/xxxx/resource/project/front-end/github/react/packages/react/index.js:11 export type StatelessFunctionalComponent< ^^^^^^ SyntaxError: Unexpected token export at Module._compile (internal/modules/cjs/loader.js:721:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18)...
 这里的注释应该是跳出switch
在React15架构的最后一段，描述递归更新的缺点描述时，举的例子和我的理解有些出入，这里想提出来讨论一下。 我记得v15的stack的问题在于，节点一层套一层，必须同步递归处理要更新的节点和所有子节点，这样一来如果超过16ms，就会造成用户操作失去响应。更新过程中如果要支持其他异步操作，保存现场的开销会很大。而fiber用了链表和双缓存的结构来改进。 下面给出的例子，是出现在替换真实节点的时候，那就体现不了stack的上述缺点。 我认为真实节点的更新，在v16里还是“同步”操作，不会更新到一半，去处理其他异步任务。如果这里用户看到了未更新的节点，那在v16里应该也是一样的。
[实现篇-多节点diff-Demo2](https://react.iamkasong.com/diff/multi.html#demo2) Demo1中的新旧节点的对比，因为在遍历中第二次中断，所以lastPlacedIndex的值为a的索引0。 ``` // 之前 abcd // 之后 acdb ``` 但是Demo2中遍历第一次就中断，lastPlacedIndex的值为何还是0呢？
### 感谢 非常感谢repo主的文章，看过很多react分析的文章，能通过这样言简意赅的方式讲出来的真的不多，在此感谢，受教了！ ### 一些建议 （可能只是自己没理解透彻，轻拍） https://react.iamkasong.com/process/fiber.html https://react.iamkasong.com/process/reconciler.html ##### beginWork&completeWork 以下简称B&C 在 `render阶段` 中对于B&C流程（callstack分析和讲解）非常好，但是感觉缺少了我们在initial Mount和update进入B&C，到底是怎么建立起来的Fiber树 (child, silbing, return, DFS相关的workLoop) 的呢 。如果能在这方面有所讲解感觉会更容易我们理解B&C的意义。 个人感觉这方面比较好的文章： 1. https://indepth.dev/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree/ 2. https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/ 自己会继续追您写的解析哈，感谢！
> 在最新的`master`代码中,三个月之前有一次更新，移除了`effectTag` ``` javascript const deletions = returnFiber.deletions; if (deletions === null) { returnFiber.deletions = [childToDelete]; returnFiber.flags |= Deletion; } else { deletions.push(childToDelete); } ``` > 使用了`flags`进行判断
@BetaSu 看到React15架构这一节，有两个疑问 1. Reconciler 与 Renderer 是交错进行的，例子里描述的中断更新这一步，是不能实际实现的吧？  2. 文章里提到 Reconciler 与 Renderer 交替进行，而 Reconciler 的步骤包括调用 render 方法，那意思是 render 方法会被调用很多次吗？次数取决于元素或者组件的个数？ 应该不是这样，是我哪里理解的有问题吗
