关注“重度前端”
助力前端深度学习
━━━━━
翻一个前端最强图
前言
很多人都知道react很快，甚至觉得用react完全不用考虑性能问题。为什么这么人为呢？因为他有visual dom 啊，是不是吧。那visual dom是什么来着？当然咱们这里不说他是个什么玩意儿，咱们就来测下react到底快不快！
总不能上来就上代码吧。那多low。我怎么也得铺垫一下，给大家缓冲一下哈。
看我临时编个故事来，如果表达的有些尴尬请大家尽量挺住。实在挺不住，那就使劲鼓掌。
很久很久以前，小黑和老白聊天，小黑说你这react东西就是好用啊，直接可以再js里写html，而且没有dom操作，总算是抛弃当前年的jq了，而且我随便怎么写都是渲染的那么快，这性能果然是快啊。
老白深深叹了一口气，感觉这孩子没救了。react性能真的那么高吗？他比jq速度快？你这只是开发感受而已，况且你做的那个东西以为我不知道吗，一个页面上没几个东西，你就自己骗自己吧。
老白是小黑的领导，当然是不敢直言反驳了，弱弱的回答一句这react的特点不就是挺快的吗。。。不过小黑没在说，他是挺聪明的自己赶紧去做个测试去了，到底是原生快还是react快。
小黑给自己定了两个测试维度【初次渲染、更新渲染】。
测试环境如下：
mac i5 8g 、chrome 68.0.3440、react 16.2小黑的机器还可以啊。小土豪啊。
下面开始进行测试
首次数据渲染
渲染条数1w条，为什么是1w，数据量太小不容易看到差距,真实场景不会有这样的场景，都是通过分页展示很少的数据，所以得出的结果并不实际；
react 代码先行 渲染1w
import './performence.less';
import React,{Component} from 'react';
import TestItem from './components/TestItem';//子组件
export default class Performance extends Component{
constructor(props){
super(props);
this.state={
page:'性能测试',
itemArr:[],//要渲染的数据列表
}
}
init={
max:10000,//渲染的条数
initMountTime:0//初始时间毫秒
}
//填充数据 ，更改数据
componentDidMount=()=>{
this.init.initMountTime=+new Date();
let max=this.init.max;
let i=0;
let itemArr=this.state.itemArr;
for(;i<max;i++){
itemArr.push({
title:'我是第'+i+'项'
});
}
this.setState({
itemArr:itemArr
})
}
//每一条数据单机事件，改变当前的title
itemClick=(index)=>{
let oldArr=this.state.itemArr;
oldArr[index].title="我被选中了------"+index;
this.setState({
itemArr:oldArr
})
}
componentWillUpdate=()=>{
this.init.initMountTime=+new Date();
}
componentDidUpdate=()=>{
console.log(this.init.max,'条react渲染所需时间',(+new Date()) - this.init.initMountTime,'ms');
}
render(){
return <main className="common-con-top">
{this.state.itemArr.map((item, index) => <TestItem key={index} title={item.title} index={index} itemClick={this.itemClick}></TestItem>)}
</main>
}
}
//子组件
import React from 'react';
export default class TestItem extends React.Component{
constructor(props) {
super(props);
}
render(){
return <div onClick={this.props.itemClick.bind(this, this.props.index)} className="testItem"><span>{this.props.title}</span></div>
}
}原生代码 渲染1w
//也是基于react 进行编写和初始化，只是数据项用原生渲染
import './performence1.less';
import React, { Component } from 'react';
export default class Performance1 extends Component {
constructor(props) {
super(props);
this.state = {
page: '性能测试',
itemArr: []
}
}
init = {
max: 10000,
initMountTime: 0
}
//原生js生成数据项
componentDidMount = () => {
this.init.initMountTime = +new Date();
let max = this.init.max;
let i = 0;
let html='';
for (; i < max; i++) {
html +='<div class="testItem"><span>我是第'+i+'项</span></div>'
}
document.getElementById('div_demo_id').innerHTML=html;
console.log(this.init.max, '条原生渲染所需时间', (+new Date()) - this.init.initMountTime,'ms');
}
componentWillUpdate = () => {
}
componentDidUpdate = () => {
}
render() {
return <div id="div_demo_id"></div>
}
}小黑鼓捣了半天，终于运行出结果来。【这家伙比较懒，得先弄react的环境】
看了结果之后，小黑有点呆了。竟然差距那么大。之前的主观判断还真是打脸啊，现在更疼了。
别急咱还没测完呢。
更新数据
点击其中一条数据后标题改变,咱们来看看执行需要多长时间，还是基于1w的数据，毕竟react的更新的思路和咱们以往的操作dom是不同的，所以有必要看下。
react 事件处理代码 以及 用时计算
itemClick=(index)=>{
let oldArr=this.state.itemArr;
oldArr[index].title="我被选中了------"+index;
//oldArr.splice(index,1);
this.setState({
itemArr:oldArr
})
}
componentWillUpdate=()=>{
this.init.initMountTime=+new Date();
}
componentDidUpdate=()=>{
console.log(this.init.max,'条react渲染所需时间',(+new Date()) - this.init.initMountTime,'ms');
}小黑也不管那么多了，希望快点得到结果，上来就是一顿写。
原生事件处理
我咋觉得原生的处理，根本不需要测呢。对不对，老铁。不过我太敬业了，还是写上了。componentDidMount = () => {
this.init.initMountTime = +new Date();
let max = this.init.max;
let i = 0;
let html='';
for (; i < max; i++) {
html +='<div dataindex="'+i+'" class="testItem">我是第'+i+'项</div>'
}
document.getElementById('div_demo_id').innerHTML=html;
console.log(this.init.max, '条原生渲染所需时间', (+new Date()) - this.init.initMountTime,'ms');
document.getElementById('div_demo_id').addEventListener('click',(e)=>{
if (e.target.nodeName === 'DIV'){
e.target.innerHTML='我被选中了----'+e.target.getAttribute('dataindex')
}
});
}结果出炉了，这次小黑想死的心都有了，以后和老白见面了还有何脸面。
上面只是react的耗时，原生的我没贴。我不好意思贴。想看结果自己运行昂。
小黑虽然脸疼，但是干的越来越带劲儿。
react的这个耗时貌似有点高，那有没有可以优化的手段呢？ react其实已经提供了，那就是shouldComponentUpdate
code哪里跑
// 在子组件内部增加一个方法 刚才咱们修改的是标题，那就通过标题来进行处理
shouldComponentUpdate(nextProps,nextState){
if(nextProps.title!==this.props.title){
return true;
}
return false;
}
// 下面在看下测试结果结果发生了稍微的变化，但是小黑顿悟了。
进行简单的优化后性能有所提升，提升了50-70ms ，这也是我什么要提取一个子组件出来；
小黑最后得出一个结论 通过上面的两个简单的测试，发现react性能和原生性能存在一定的差距，同时react提供我们可以优化的空间，react给到的是相对差不多的性能，并不是说虚拟dom比原生的快，只是react的组件化思想是一种全新得突破，让我们尽可能的少的操作dom，不用过多的考虑性能问题也能开发出性能差不多，过的去的应用；
小黑长叹一口气，react还真是让人脑瓜疼啊。还得继续研究啊。不巧的是碰到了老白，微微一笑然后走开，不带走一丝尘埃。
故事到此结束！
总结
其实很多时候我们虽然接受了一个新事物，但是我们对他的了解只是表面的肤浅的。更深层次的东西需要我们花更多的精力去探索。代码写的一般般，不过瑕不掩瑜哈，能说明问题。代码不重要，重要的是对他的认知和理解。从这里开始，不要再觉得react有多快了，小项目没事，你试试搞个大的玩玩。真不需要优化的话那你就是最帅的地球人。
如果我看到这样的文章，我反手就是几个赞。
【点个赞或者分享下，我就干的更带劲儿】
重度前端--助力深度学习
为web前端同行提供有价值、有深度的技术文章
官网：http://bigerfe.com【建设】
长按二维码关注我
