到目前为止，react-aomini最大的特点就是简单粗暴（react-aomini是个人写的一个谈不上框架的小框架，不了解的可以看看我之前写的两篇博文，react-redux？mobx？或许我需要更加小巧玲珑的和小巧玲珑的react框架（第二弹）正式命名--aomini），大家感兴趣的可以从react-aomini github签出代码看看，代码写的也没拾掇过，见笑见笑，看个思路，简单轻量是实现了，但是大家还是会疑惑，那真的能投入实战吗，性能到底咋样呢？实不相瞒，我个人也是比较好奇，毕竟我也没有测试过，不过我还是蛮有信心的，因为轻量就是不为求全，只为解决最尖锐的那个问题，所以最接近原生，原生肯定比在外面套层外套跑的快啦，所以相信react-aomini不会太挫，不过说是这么说，还是要数据来说话。 为了结果更加有参考意义，我们就拿当下最流行的react-redux框架来进行性能对比，react-aomini和react-redux作为实验组，并加入react原生作为参照组。我们的性能测试对比主要是采用控制三个不同的框架作为唯一变量进行实验，三个实验对象中对同一个模块进行相同数量级的调用，分别记录耗时数据。 接下来简要说明一下我们的实验，我们会对每个实验体（也就是react-aomini，react和react-redux）分别进行百级、千级、万级以及十万级的模块加载，然后分别对所有模块进行更新操作，模块加载暂不作为统计数据，我们取更新操作的耗时作为实验数据，每组取十个数据作为一组。为了方便起见，我使用其中最简单的react原生代码进行实验说明，代码如下： Module1.js
class Module1 extends React.Component{
constructor(){
super();
this.state = {
moduleQuantity:900
};
}
render(){
let { moduleQuantity } = this.props;
return (
<div>
<p>--------Module1---------</p>
<input type="number" value={moduleQuantity} onChange={this.setValue.bind(this)} />
</div>
)
}
componentDidUpdate(prevProps, prevState) {
console.log("Module1 did update")
}
setValue(e){
console.log(e.target.value);
let { setModuleQuantity } = this.props;
setModuleQuantity(e.target.value);
}
}
MoudleX.js代码如下：
/**
* siblings2
*/
class ModuleX extends React.Component{
constructor(){
super();
this.startTime = 0;
this.state = {
updateCount:1
};
}
render(){
let {moduleQuantity} = this.props;
let { updateCount } = this.state;
console.log("&&&&&&&&&&&",updateCount)
let subNum = Number(moduleQuantity || 0);
return (
<div>
<p>---------ModuleX---------</p>
兄弟节点Module1的值:{moduleQuantity}
<button onClick={this.updateX.bind(this)}>更新</button>
{
subNum <= 0 ? "":(
Array(subNum).fill(1).map((item,i)=>{
return (
<SubModuleX key={i} mIndex={i+1} updateCount={updateCount} />
)
})
)
}
</div>
)
}
componentWillUpdate(nextProps, nextState) {
this.startTime = new Date().getTime();
console.log("ModuleX will update")
}
componentDidUpdate(prevProps, prevState) {
console.log("ModuleX did update using time:",new Date().getTime() - this.startTime)
}
updateX(){
let { updateCount } = this.state;
this.setState({
updateCount:updateCount+1
});
}
}
最重要的一个实验模块SubModuleX代码如下：
class SubModuleX extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
render() {
let { mIndex, updateCount } = this.props;
return <div>sub module {mIndex},update count:{updateCount}</div>
}
}
App.js文件如下：
class App extends React.Component{
constructor(){
super();
this.name = "App";
this.state = {
moduleQuantity:900
}
}
render(){
let {moduleQuantity} = this.state;
console.log("moduleQuantity:",moduleQuantity)
return (
<div>
<Module1 moduleQuantity={moduleQuantity} setModuleQuantity={this.setModuleQuantity.bind(this)} />
<ModuleX moduleQuantity={moduleQuantity} />
</div>
)
}
setModuleQuantity(moduleQuantity){
this.setState({
moduleQuantity
})
}
}
实验代码如上简要说明一下，十分简单。其中Module1模块主要是一个moduleQuantity的输入框，也就是控制实验数量的一个输入，ModuleX模块中获取moduleQuantity后，对SubModuleX进行循环装载，模块加载完后，才算是准备好进行实验，这里注意，我们并没有将模块的加载耗时作为实验数据，而是将更新模块耗时作为实验数据。 为了数据更具有参考意义，这里贴一下我实验环境参数：mac pro，单核 i7处理器2.4GHz，8G内存，google浏览器最新版本61.0.3163.100。 开始我们的实验后，我们只需要点击ModuleX中的更新按钮，所有模块更新完毕后，会打印出每次的耗时。我们将实验结果记录并绘成折线图，结果如下：
