react性能优化达到最大化的方法 immutable.js使用的必要性

一行代码胜过千言万语。这篇文章呢，主要讲述我一步一步优化react性能的过程，为什么要用immutable.js呢。毫不夸张的说。有了immutable.js（当然也有其他实现库）。。才能将react的性能发挥到极致！要是各位看官用过一段时间的react，而没有用immutable那么本文非常适合你。那么我开始吧！

1、对于react的来说，如果父组件有多个子组件

想象一下这种场景，一个父组件下面一大堆子组件。然后呢，这个父组件re－render。是不是下面的子组件都得跟着re－render。可是很多子组件里面是冤枉的啊！很多子组件的props 和 state 然而并没有改变啊！！虽然virtual dom 的diff 算法很快，但是性能也不是这么浪费的啊！下面我们上代码

1）.原始代码如下

以下是父组件代码。。负责输入name 和 age 然后循环显示name 和 age

 export default class extends component {
  constructor(props){
  super(props)
  this.state={
   name:"",
   age :"",
   persons:[]
  }
  }
  render() {
  const {name,age,persons} = this.state
  return (
   <div>
   <span>姓名:</span><input value={name} name="name" onchange={this._handlechange.bind(this)}></input>
   <span>年龄:</span><input value={age} name="age" onchange={this._handlechange.bind(this)}></input>
   <input type="button" onclick={this._handleclick.bind(this)} value="确认"></input>
   {persons.map((person,index)=>(
    <person key={index} name={person.name} age={person.age}></person>
   ))}
   </div>
  )
  }
  _handlechange(event){
  this.setstate({[event.target.name]:event.target.value})
  }
  _handleclick(){
  const {name,age} = this.state
  this.setstate({
   name:"",
   age :"",
   persons:this.state.persons.concat([{name:name,age:age}])
  })
 
  }
 }

以下是子组件代码单纯的显示name和age而已

class person extends component {
 componentwillreceiveprops(newprops){
 console.log(`我新的props的name是${newprops.name}，age是${newprops.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是我要re-render了`);
 }
 render() {
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

运行起来长下图这个样

好那么问题来了，我们看一下控制台：

天哪，这么多次re-reder..细细观看，不难发现。要re-render这么多次，父组件一re-render,子组件就跟着re-render啊。那么多么浪费性能，好purerendermixin出场

2）.purerendermixin

因为咱用的是es2015的 component，所以已经不支持mixin了，不过没关系，可以用hocs，这个比mixin还更受推崇呢。我有空回用代码来展示他俩的异同，鉴于不是本文重点，，大家可以看这两篇文章了解下react mixin 的前世今生 和mixins are dead. long live composition

所以在这里我们用pure render decorator代替purerendermixin，那么代码如下

import purerender from "pure-render-decorator"
...

@purerender
class person extends component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

加个这东西就完事了？看上去咋这么不令人信服啊。不管怎样，试试吧。

果然可以做到pure render，在必须render 的时候才render。

好我们看看它的神奇之处

@purerender

是es7的decorators语法。上面这么写就和下面这么写一样

class personorigin extends component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}
const person = purerender(personorigin)

purerender其实就是一个函数，接受一个component。把这个component搞一搞，返回一个component看他purerender的源代码就一目了然

function shouldcomponentupdate(nextprops, nextstate) {
 return shallowcompare(this, nextprops, nextstate);
}

function purerende(component) {
 component.prototype.shouldcomponentupdate = shouldcomponentupdate;
}
module.exports = purerender;

purerender很简单，就是把传进来的component的shouldcomponentupdate给重写掉了，原来的shouldcomponentupdate，无论怎样都是return ture，现在不了，我要用shallowcompare比一比，shallowcompare代码及其简单，如下

function shallowcompare(instance, nextprops, nextstate) {
 return !shallowequal(instance.props, nextprops) || !shallowequal(instance.state, nextstate);
} 

一目了然。分别拿现在props&state和要传进来的props&state，用shallowequal比一比，要是props&state都一样的话，就return false，是不是感觉很完美？不。。这才刚刚开始，问题就出在shallowequal上了

3）.shallowequal的问题

shallowequal引起的bug
很多时候，父组件向子组件传props的时候，可能会传一个复杂类型，比如我们改下。

 render() {
 const {name,age,persons} = this.state
 return (
  <div>
...省略.....
  {persons.map((person,index)=>(
   <person key={index} detail={person}></person>
  ))}
  </div>
 )
 }

person是一个复杂类型。这就埋下了隐患，在演示隐患前，我们先说说shallowequal，是个什么东西，shallowequal其实只比较props的第一层子属性是不是相同，就像上述代码，props 是如下

{
 detail:{
  name:"123",
  age:"123"}
}

他只会比较props.detail ===nextprops.detail
那么问题来了，上代码
如果我想修改detail的时候考虑两种情况

情况一，我修改detail的内容，而不改detail的引用

这样就会引起一个bug，比如我修改detail.name,因为detail的引用没有改，所以props.detail ===nextprops.detail 还是为true。
所以我们为了安全起见必须修改detail的引用，（redux的reducer就是这么做的）

情况二，我修改detail的引用

这种虽然没有bug，但是容易误杀，比如如果我新旧两个detail的内容是一样的，岂不是还要，render。所以还是不完美，你可能会说用深比较就好了，但是 深比较及其消耗性能，要用递归保证每个子元素一样。

这只是说没有用immutable引起各种、、、下一篇我讲写，如何用immutable.j。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。