最近在看ant pro 发现一个新奇的东西

这个 PureComponent 是哪里来的呢
什么是PureComponent
PureComponent就是React 15.3.0 新增了一个 PureComponent 类,我们可以以es6的方式方便的定义纯组件。
为什么使用PureComponent
使用PureComponent之后,组件在shoudComponentUpdate中会浅比较渲染前后的props和state,如果没有变化,组件不会进入接下来的生命周期,可以节省不必要的diff操作。
下面举个例子
这里有两个组件,Parent和Child
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
| import React, {Component} from 'react'; import Child from './child';
class Parent extends Component { constructor() { super(); this.state = { title: 'title' };
this.changeState = this.changeState.bind(this); }
changeState() { this.state.title = Math.random(); this.setState(this.state); }
render() { return ( <div> <h3>Container</h3> <button type="button" onClick={this.changeState}>change</button> <Child></Child> </div> ); }
componentWillUpdate() { console.log('parent will update'); } }
export default Parent;
import React, {Component} from 'react';
class Child extends Component { render() { return ( <div>child</div> ); }
componentWillUpdate() { console.log('child will update'); } }
export default Child; `</pre>
在这里,Child组件没有任何属性输入和state状态,只是一个静态组件,我们点击Parent的change按钮,讲道理Child组件不应该进行任何diff,但是实际情况是"parent will update"和"child will update"都被打印出来了,这是不合理的。所以我们修改下child.js,让它继承PureComponent
<pre class="line-numbers prism-highlight" data-start="1">` import React, {PureComponent} from 'react';
class Child extends PureComponent { render() { return ( <div>child</div> ); }
componentWillUpdate() { console.log('child will update'); } }
export default Child;
|
然后我们再次点击按钮,会发现只输出了”parent will update”,这是我们想要的。
应该注意的问题
PureComponent只能说是一种泛泛的性能问题解决方法,并不具备很高的定制性,最好的方式还是自己去处理组件的shoudComponentUpdate。并且,PureComponent的浅对比shallowEqual在对比引用值的时候,也会存在问题。