react如何性能达到最大化(前传),暨react为啥非得使用immutable.
一行代码胜过千言万语。。这篇文章呢。。主要讲述我一步一步优化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:"",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> ) } } 运行起来长下图这个样 2,PureRenderMixin因为咱用的是es2015的 Component,所以已经不支持mixin了。。不过没关系,可以用 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> ) } } 加个这东西就完事了??看上去咋这么不令人信服啊。。不管怎样。。试试吧 @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 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,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,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的引用这样就会引起一个bug,比如我修改detail.name,因为detail的引用没有改,所以 情况二,我修改detail的引用这种虽然没有bug,但是容易误杀,比如如果我新旧两个detail的内容是一样的,岂不是还要,render。。所以还是不完美,,你可能会说用 深比较就好了,,但是 深比较及其消耗性能,要用递归保证每个子元素一样, 这只是说没有用immutable引起各种 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |