# PureComponent

Pure [pjʊə(r)] 纯的;纯净的;

 所以PureComponent可以理解为react中的纯组件

 在react应用中,shouldComponentUpdate函数可以手动控制组件的更新渲染,是优化react组件渲染最直接的方式 。PureComponent原理shou就是利用shouldComponentUpdate对组件的封装。

# 原理

 利用在shouldComponentUpdate函数中浅比较state和nextState、props和nextProps控制是否更新渲染。

源代码部分代码

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}
1
2
3
4

# 使用场景

  • PureComponent一般用于展示组件,以减少更新渲染。
  • 优化渲染,不必重写shouldComponentUpdate达到减少渲染次数的目的。

# 注意点

 PureComponent原理是浅比较,所以当state或props数据是引用数据变动时,并不会触发更新render.

# 例子

import React, { PureComponent, Component } from 'react';

class ChildPage extends PureComponent{
    constructor() {
        super();
    }

    render() {
        return (<div>children component</div>);
    }
}

class ParentPage extends Component{
  constructor() {
    super();
    this.state = {
      isShow: false
    };
  }
  changeState = () => {
    this.setState({
      isShow: true
    })
  };
  render() {
    console.log('parent render');
    return (
      <div>
        <button onClick={this.changeState}>点击</button>
        <div>{this.state.isShow.toString()}</div>
        <ChildPage />
      </div>
    );
  }
}
// LOG: parent render

// 当父组件点击,子组件不会重新渲染
// 在ChildPage组件中,state和props并没有发生改变, 
// 故shouldComponentUpdate浅比较返回false,不执行更新render.
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