React functional component debugger.
https://zhuanlan.zhihu.com/p/391734514
npm i relyzer -D{
plugins: [
// enable only for development
+ isDevelopment ? 'module:@relyzer/babel' : null,
].filter(Boolean),
}Notice that @relyzer/babel will do nothing when process.env.NODE_ENV === 'production'
Before the use, you probably need to know how Relyzer works:
In order to collect the runtime information, Relyzer uses babel to transform the functional component code, adding some hooks code into the body.
function MyComponent() {
// relyzer will auto add some code
+ const r = useRelyzer()
const a = useCallback()
+ r(a)
...
+ r()
}React hooks could only properly run inside functional components or other hooks. So it is important to ensure that the additional code only be added and runs in real functional components.
There are two way for that purpose:
Use @component or 'use relyzer' for explicitly marking the function as a component:
Add @component tag in jsdoc of your react component
/**
* my component
+ * @component
*/
function MyComponent() {
const [val, setVal] = useState();
return (
<div />
)
}
/**
* my component
*/
function MyComponent() {
+ 'use relyzer'
const [val, setVal] = useState();
return (
<div />
)
}Tell Relyzer to auto detect the components.
Relyzer will inject useRelyzer to all the functions with uppercase first letter.
When useRelyzer called, it will try to check whether the function is called in the React render call stack
{
plugins: [
// enable only for development
+ isDevelopment ? ['module:@relyzer/babel', { autoDetect: true }] : null,
].filter(Boolean),
}Make sure you have installed the latest React Devtool in Chrome or Firefox.
- Start the dev server and open browser page
- Open React Devtool
- Select component in the components tree viewer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent