Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
爱吃血肠
leetcode
提交
c59521b2
L
leetcode
项目概览
爱吃血肠
/
leetcode
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
L
leetcode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c59521b2
编写于
4月 09, 2019
作者:
L
luzhipeng
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: fiber
上级
d8b67e43
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
26 addition
and
0 deletion
+26
-0
thinkings/basic-data-structure.md
thinkings/basic-data-structure.md
+26
-0
未找到文件。
thinkings/basic-data-structure.md
浏览文件 @
c59521b2
...
...
@@ -93,9 +93,35 @@ React 必须重新实现遍历树的算法,从依赖于`内置堆栈的同步
如果我们可以随意中断调用堆栈并手动操作堆栈帧,那不是很好吗?
这就是 React Fiber 的目的。
`Fiber 是堆栈的重新实现,专门用于 React 组件`
。 你可以将单个 Fiber 视为一个
`虚拟堆栈帧`
。
react fiber 大概是这样的:
```
js
let
fiber
=
{
tag
:
HOST_COMPONENT
,
type
:
"
div
"
,
return
:
parentFiber
,
children
:
childFiber
,
sibling
:
null
,
alternate
:
currentFiber
,
stateNode
:
document
.
createElement
(
"
div
"
),
props
:
{
children
:
[],
className
:
"
foo
"
},
partialState
:
null
,
effectTag
:
PLACEMENT
,
effects
:
[]
};
```
从这里可以看出fiber本质上是个对象,使用parent,child,sibling属性去构建fiber树来表示组件的结构树,
return, children, sibling也都是一个fiber,因此fiber看起来就是一个链表。
想要了解更多的朋友可以看
[
这个文章
](
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
)
如果可以翻墙, 可以看
[
英文原文
](
https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7
)
[
这篇文章
](
https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec
)
也是早期讲述fiber架构的优秀文章
我目前也在写关于《从零开发react系列教程》中关于fiber架构的部分,如果你对具体实现感兴趣,欢迎关注。
### 非线性结构
## 树
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录