20

一行代码胜过千言万语。。这篇文章呢。。主要讲述我一步一步优化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.js..

你可能感兴趣的

16 条评论
Leon · 2016年12月29日

下一篇呢? 断更了吗? 就一半儿的内容啊。。。 看着太痛苦了。。。

+2 回复

jackyon · 2016年03月03日

大家可以看这两篇文章了解下React Mixin 的前世今生 和Mixins Are Dead. Long Live Composition

这里的链接错误了

+1 回复

happy007 · 2017年01月03日

对啊,下一篇呢?lz偷懒啊

+1 回复

高梵梵高 · 2016年01月13日

gogogo.下一篇

回复

RunningOutOfTime · 2016年01月18日

能把“组建”改为"组件"吗?看的很别扭

回复

杨川宝 作者 · 2016年01月18日

sorry…回家立刻改…

回复

付引 · 2016年01月19日

赞赞赞~

回复

xiaokekeT · 2016年01月30日

赞, 期待下一篇

回复

钻钻毛儿 · 2016年02月04日

赞赞赞~

回复

anonawang · 2016年05月23日

能否共享下源码?

回复

吉吉hui · 2016年07月28日

期待下一篇如何使用immutable.js

回复

Dont · 2016年09月14日
  1. 原始代码也就是第一个例子,给的截图结果 “我re-render了”并没有在代码中看到- -||反倒在后面的例子才有。

  2. 我有空回用代码来展示他俩的异同
    有个错别字

回复

潇洒小乙哥 · 2017年04月05日

期待如何用immutable.js.

回复

realwugang · 2017年07月26日

期待如何用immutable.js

回复

lbs0912 · 2018年08月01日

期待下一篇

回复

null · 4月12日

作者确定加上pureRender之后,componentWillReceiveProps里面打印的东西和没加pureRender之前有变化??

回复

载入中...