-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react解析 render的FiberRoot(三) #9
Labels
Blog
文章
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
react解析: render的FiberRoot(三)
下面将会说到
ReactDOM.render
在ReactDOM中的调用流程,实际就是分析下面代码:实际代码:
render 函数
ReactDOM.render实际调用的就是下面的代码
render函数中的参数
element
是 传入的组件,container
DOM节点容器,callback是回调函数。ReactDOM.render文档。legacyRenderSubtreeIntoContainer 函数
container
表示DOM元素节点容器, 在上面的代码中会创建一个ReactRoot,然后将它挂载在container容器上,container._reactRootContainer
就是挂载的ReactRoot属性。创建FiberRoot核心函数
调用createContainer 创建FiberRoot,下面我们将会说到FiberRoot 对象
FiberRoot
createFiberRoot函数中,首先创建了一个
root: FiberRoot
,然后又创建了一个uninitializedFiber: RootFiber
,它们两者还是相互引用。我们下面顺便说一下FiberRoot 和 RootFiber的关系,同时拿出几个必须要要了解的属性解释一下。
以上图片中只有FiberRoot的部分属性,想了解更多,可以查看FiberRoot的数据结构哦!!
更多内容:
react解析: React.createElement(一)
react解析: React.Children(二)
参考:
yck: 剖剖析 React 源码
Jokcy 的 《React 源码解析》: react.jokcy.me/
ps: 顺便推一下自己的个人公众号:Yopai,有兴趣的可以关注,每周不定期更新,分享可以增加世界的快乐
The text was updated successfully, but these errors were encountered: