react-dev-loader

react-dev-loader

一个用来辅助 react 开发的工具

目前提供如下功能：

• 每个组件挂载和卸载时打印 log
• 组件更新打印更新花费时间
• 组件更新打印引起组件更新的 props

同时支持类组件和函数组件。

另外，通过颜色来区分不同语义：

• 蓝色，正常行为
• 绿色，代表第一次渲染
• 红色，代表某一段时刻同一组件挂载了多次，需要重点排查
• 黄色，标识该行「打印了引起组件更新的属性」

使用方法

安装

npm i react-dev-loader -D

配置

 {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          },
          {
            loader: 'react-dev-loader',
            options: {},
          },
        ],
        exclude: /node_modules/,
      },

options 提供了 2 个可选项

• exclude 忽略不需要的文件或文件夹
• verbose 是否显示当前正在处理的模块路径，默认不显示

效果截图

如果你有其他需求可以来github提 issue 哦~

tips

组件一定要是 tsx 后缀或者是 jsx 后缀， ts、js 后缀的文件不会处理。