原创力文档- 1、本文档共8页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
ReactDOM隐藏特性详解
目录前言ReactDevTools的原理渲染阶段FiberRoot/FiberNodememoizedState与ReactHooks实践：突破useDebugValue的限制useDebugValueAnywhere的实现特定的devtools总结
前言
有过React经验的开发者可能都使用过ReactDevTools。
DevTools提供了丰富的能力：展示组件树，组件的props与组件中hook的值。
ReactDevTools是如何检测当前网页是否使用React以及是如何获取组件相关的众多数据呢？
ReactDevTools的原理
打开ReactDOM代码时，用devtools为关键字搜索，你会发现许多与ReactDevTools相关的代码。
functioninjectInternals(internals){
if(typeof__REACT_DEVTOOLS_GLOBAL_HOOK__===undefined){
//NoDevTools
returnfalse;
varhook=__REACT_DEVTOOLS_GLOBAL_HOOK__;
try{
rendererID=hook.inject(internals);//Wehavesuccessfullyinjected,sonowitissafetosetuphooks.
injectedHook=hook;
}catch(err){
//...
}//DevToolsexists
在浏览器控制台输入__REACT_DEVTOOLS_GLOBAL_HOOK__详细看一下这个对象。
这个对象十分复杂，以下的几个方法倒是很值得关注。
onCommitFiberRoot
onCommitFiberUnmount
onPostCommitFiberRoot
渲染阶段
从名称来看，上面这几个方法与ReactDOM的渲染密切相关。
ReactDOM在特定的阶段会调用这些的方法，比如：onCommitFiberRoot。
functiononCommitRoot(root,priorityLevel){
if(injectedHookamp;amp;typeofinjectedHook.onCommitFiberRoot===function){
try{
//...
injectedHook.onCommitFiberRoot(rendererID,root,priorityLevel,didError);
}catch(err){}
正是借助__REACT_DEVTOOLS_GLOBAL_HOOK__，ReactDevTools便与ReactDOM建立起了联系，从而拥有获取组件众多信息的能力。
FiberRoot/FiberNode
在新的React架构下，会先把VirtualDOM转成FiberNode，然后再渲染FiberNode。
onCommitFiberRoot等方法中的传递的数据正是FiberNode。
FiberNode的结构是比较复杂的，可以简化为如下的结构：
interfaceReactFiberRootNode{
current:ReactFiberNode;
//...
interfaceReactFiberNode{
tag:number;
stateNode:null|HTMLElement;//dom节点
memoizedProps:Recordstring,any//props
memoizedState:ClassComponentState|HookLinkedQueue|null;//hooks
child:ReactFiberNode;
sibling:ReactFiberNode;
return:ReactFiberNode;//parent
//...
从上面的结构可以看出，FiberNode包含了非常多与组件相关的信息。
stateNode为组件对应真实的DOM节点，me
文档评论（0）