打造首款React质量与性能分析工具首先说一下为什么要写这款工具，由来是什么吧。其实我们在不同的公司里面，都会发现一个问题，框架这这么一款，官方文档介绍也很详细，为什么能够写出各种各样的代码，明明框架约束的很好，但是写出来的代码五花八门，要好好拜读别人的代码，才能知道其中的业务逻辑是什么，完全是事倍功半啊。如果有好的工具，必然能够提高公司的整体代码质量。其实上面的问题，很早就被各样的牛人发现了，然后开发出了很好的工具来辅助开发，比如eslint，csslint等，帮助开发者矫正错误的代码风格，统一公司的代码风格。但是对于最近几年很火的React框架，是否有一些好的工具来完善react代码吗，答案肯定是有的，其实去网上搜，肯定也能找到一些，但是今天将要介绍的一款工具，react-perf工具，是从bable层的AST来分析语法，在编译阶段进行校正，最后在编译阶段没有问题后，再在运行阶段进行性能分析，给出性能建议，提高整体代码质量。在给出方案前，让我们一起看看，在大家开发过程中，都有哪些不好的代码。在componentWillMount设置setState?componentWillMount(){this.setState({count:2})}这个问题是无话可说的，完全不应该存在。直接赋值state？clickEvent(){this.state.name='hello'this.state.age=20this.setState(this.state)}背景：这段代码的历史背景是这样的，我们的开发者在使用setState的时候，发现this.setState是异步的，为了解决可以同步使用this.state,就用了这样的方式。问题是，现在好多开发者都是Ctrl+c/Ctrl+v,导致好多地方都是用这样的代码,在这里，我们也是坚决杜绝。这里只是简单的列了一些代码，像这样的代码，其实还有很多很多。对于这些代码，完全可以在编译阶段进行杜绝。编译阶段怎么杜绝，那就只有靠babel来搞定了，接下来就是我们要说的主题了。编译分析GitChat编译分析babel这里就不说了，这里就直接进阶到babel的插件来分析了。如果大家不熟悉babel插件，那我简单说一下，babel插件就是通过遍历文件结构树，提供一种可以对AST进行增，修和查的机制。插件具体实现步骤如下。刷选react类首先我们肯定是需要对react类进行处理，所以基于这一点，我们肯定是要对于类进行刷选，这里就引出来第一个配置项。"needAddPerfRule":{"superClass":["Component"]}而在babel插件里面，我们先对Class进行判断，如果不是继承Component,或者不是我们设置的父类，程序就返回，我们的实现如下：Class:functionClas...
