一行代码胜过千言万语。这篇文章呢，主要讲述我一步一步优化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} onChange={this._handleChange.bind(this)}></input> <span>年龄:</span><input value={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;