一种跟踪页面中调用的所有组件的方法

Question

I need a way to track all the component calls when a page renders, for example if my page is like:

<MyPage>
   <A />
   <B>
      <B2/>
      <B3>
   </B>
   <C /> // witch the component C, calls D in its own code
</MyPage>

and C is like:

<C>
   <D />
</C>

something like that, witch a bunch of nested components are called for a page to be rendered, I need a list of all of them, in this example, I need (A, B, B2, B3, C, D),

is this possible?

Answer 1

Have you taken a look at the React Developer Tools addon ( Chrome , Firefox )? That will add a "Components" tab to your developer tools, which looks like this:

You can then select any component to get more details about it as well.

Answer 2

It's like you asking something already done in React Chrome extension,which is an open source project.. When you looked into its main.js file https://github.com/facebook/react/blob/master/packages/react-devtools-extensions/src/main.js Which got some noticable imports

import { getAppendComponentStack, getBreakOnConsoleErrors, getSavedComponentFilters, getShowInlineWarningsAndErrors, } from 'react-devtools-shared/src/utils';

I think what you need is must be inside getAppendComponentStack Utility.. Check also this https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/utils.js

Sure you will workout a solution with some analysis..

#using Mobile edition.. Please bear with the format of the answer.