File tree 1 file changed +26
-0
lines changed
1 file changed +26
-0
lines changed Original file line number Diff line number Diff line change @@ -93,9 +93,35 @@ React 必须重新实现遍历树的算法,从依赖于`内置堆栈的同步
93
93
如果我们可以随意中断调用堆栈并手动操作堆栈帧,那不是很好吗?
94
94
这就是 React Fiber 的目的。 ` Fiber 是堆栈的重新实现,专门用于 React 组件 ` 。 你可以将单个 Fiber 视为一个` 虚拟堆栈帧 ` 。
95
95
96
+ react fiber 大概是这样的:
97
+
98
+ ``` js
99
+ let fiber = {
100
+ tag: HOST_COMPONENT ,
101
+ type: " div" ,
102
+ return: parentFiber,
103
+ children: childFiber,
104
+ sibling: null ,
105
+ alternate: currentFiber,
106
+ stateNode: document .createElement (" div" ),
107
+ props: { children: [], className: " foo" },
108
+ partialState: null ,
109
+ effectTag: PLACEMENT ,
110
+ effects: []
111
+ };
112
+
113
+ ```
114
+
115
+ 从这里可以看出fiber本质上是个对象,使用parent,child,sibling属性去构建fiber树来表示组件的结构树,
116
+ return, children, sibling也都是一个fiber,因此fiber看起来就是一个链表。
117
+
96
118
想要了解更多的朋友可以看[ 这个文章] ( https://github.com/dawn-plex/translate/blob/master/articles/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree.md )
97
119
98
120
如果可以翻墙, 可以看[ 英文原文] ( https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7 )
121
+
122
+ [ 这篇文章] ( https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec ) 也是早期讲述fiber架构的优秀文章
123
+
124
+ 我目前也在写关于《从零开发react系列教程》中关于fiber架构的部分,如果你对具体实现感兴趣,欢迎关注。
99
125
### 非线性结构
100
126
101
127
## 树
You can’t perform that action at this time.
0 commit comments