# babel-plugin-react-perf

> # Introduction 对于babel-plugin-react-perf这款插件，主要是用来分析和检测react代码使用不当的地方 1. 首先会在编译阶段对react组件进行分析，对于严重的语句，直接进行报错，而对于警告类的，只是给予警告 2. 然后在运行阶段，会自动注入代码，对于执行时间过长和有重新渲染的组件进行console日志的提示

Latest version **0.1.2** (published 2017-05-04) · 0 weekly downloads

## Install

```sh
npm install babel-plugin-react-perf
pnpm add babel-plugin-react-perf
yarn add babel-plugin-react-perf
bun add babel-plugin-react-perf
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-05-04 |
| First published | 2017-03-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | vic.wang |
| Maintainers | vicwang163 |
| Keywords | babel-plugin, react, perf, performance |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-react-perf
- Repository: https://github.com/vicwang163/babel-plugin-react-perf
- Homepage: https://github.com/vicwang163/babel-plugin-react-perf#readme
- Issues: https://github.com/vicwang163/babel-plugin-react-perf/issues
- npm.io page: https://npm.io/package/babel-plugin-react-perf

## Dependencies (4)

- [colors](https://npm.io/package/colors.md) ^1.1.2
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.18.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.21.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.18.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2017-05-04
- 0.1.1 — 2017-05-04
- 0.1.0 — 2017-04-16
- 0.0.3 — 2017-03-31
- 0.0.2 — 2017-03-30
- 0.0.1 — 2017-03-28

## README

# babel-plugin-react-perf

# Introduction
对于babel-plugin-react-perf这款插件，主要是用来分析和检测react代码使用不当的地方
1. 首先会在编译阶段对react组件进行分析，对于严重的语句，直接进行报错，而对于警告类的，只是给予警告
2. 然后在运行阶段，会自动注入代码，对于执行时间过长和有重新渲染的组件进行console日志的提示

## usage

npm install --save babel-plugin-react-perf

## config

```json
{
  "presets": ["es2015", "react"],
  "plugins": [
    ["react-perf",{
        "maxExecuteLimit": 5,
        "maxRenderElements": 50,
        "needAddPerfRule": {
          "superClass": ["Component"]
        },
        "invalidStatements": [
          "this.refs.\\w+.value\\s*=\\s*\\S+"
        ]
      }
    ]
  ]
}
```

## fields

### maxExecuteLimit
react组件最大执行时间（单位ms），如果超过这个时间，会在runtime跑出一个error

### maxRenderElements
react组件包括的最大元素数，如果超过这个值，表示组件可以考虑颗粒化

### needAddPerfRule
对于有些组件，不需要进行分析，所以对于这个参数，可以配置哪些类需要被perf插件检测
superClass表示父类，一般情况下，好多react组件都继承`Component`

## 编译阶段分析
1. 不能使用`this.state.xxx = xxx`的语句
2. 在componentWillMount,constructor里面使用`this.setState`,可以吧state写在constructor里面 `this.state= {}`
3. 通过invalidStatements数组的配置，可以让用户自己配置不允许的代码

## 运行阶段分析
利用'react-addons-perf'插件进行自动注入分析
1. getWasted
2. getInclusive

---
_Source: https://npm.io/package/babel-plugin-react-perf · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._