如何在React Hook组件中获取FiberNode节点？

Hey Thomas, 要在函数组件里拿到对应的FiberNode，React本身并没有提供官方公开的API来直接获取——毕竟Fiber是React内部的渲染调度机制，不属于对外暴露的公共接口。不过如果是调试或者特殊场景需求，我们可以通过一些内部机制来实现，下面是两种可行的方案，但务必注意：这些依赖React内部实现的方法可能会在未来版本中变动，生产环境使用请谨慎！

方案一：通过DOM节点的内部属性获取 #

每个挂载到DOM上的元素，React都会在其对象上附加对应的FiberNode引用，不同React版本的字段名略有差异：

• React 18+：字段名以__reactFiber$开头（后面会跟着随机字符串）
• 旧版本React（如16-17）：可能使用_internalInstance字段

具体实现代码：

import React, { useRef, useEffect } from 'react';

export default function App() {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      // 适配React 18+的字段名
      const fiberKey = Object.keys(divRef.current).find(key => key.startsWith('__reactFiber$'));
      const fiberNode = fiberKey ? divRef.current[fiberKey] : divRef.current._internalInstance;

      console.log('获取到的FiberNode:', fiberNode);
      // 你可以在这里访问FiberNode的属性，比如type、stateNode、child等
    }
  }, []);

  return <div ref={divRef}></div>;
}

方案二：使用React内部暴露的秘密对象 #

React有一个内部暴露的对象__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED（名字已经直白地提醒了风险），其中的ReactCurrentOwner在组件渲染期间会指向当前组件的FiberNode：

import React, { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    const { ReactCurrentOwner } = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
    // 在组件的effect执行时，ReactCurrentOwner.current就是当前组件的FiberNode
    console.log('当前组件的FiberNode:', ReactCurrentOwner.current);
  }, []);

  return <div></div>;
}

重要提醒 #

1. 以上两种方法都依赖React的内部实现细节，没有官方支持，React团队随时可能修改这些字段或API，升级React版本时可能会失效。
2. 如果只是调试需求，更推荐使用React DevTools——在组件面板中右键选择"Inspect Fiber"就能直接查看组件的FiberNode结构，这是最安全可靠的方式。

内容的提问来源于stack exchange，提问作者Thomas.lin