Relyzer
React functional component debugger.
Screenshot
Zhong Wen Shuo Ming
https://zhuanlan.zhihu.com/p/391734514
Usage
Install packages
npm i relyzer -D
Add babel config
{
plugins: [
// enable only for development
+ isDevelopment ? 'module:@relyzer/babel' : null,
].filter(Boolean),
}
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()
}
// 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:
(1) Add jsdoc
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 (
)
}
/**
* my component
*/
function MyComponent() {
+ 'use relyzer'
const [val, setVal] = useState();
return (
)
}