React 中的 PureComponent 和 Component 对比

Posted 2022-11-21 诗渊

PureComponent的作用：

PureComponent 其实是在内部帮我们简单实现了一下shouldComponentUpdate的功能，以便提供组件的性能；这里的简单指是：对prop和state做浅比较，若浅比较结果相同，则该组件以及其子组件不做render；否则，render。

对比示例：

// index.jsx
import React,  Component  from "react";
import ReactDOM from "react-dom";

import './style.css';

import  SubPage1  from "../components/SubPage1/SubPage1";
import  SubPage2  from "../components/SubPage2/SubPage2";

class PageA extends Component 
    constructor(props) 
        super();
        this.state = 
            outerNum: 0,
            innerNum: 0,
        
    
    addOuterClick = () => 
        console.log("===== addOuterClick =====");
        this.setState(
            outerNum: ++this.state.outerNum
        )
    

    addInnerClick = () => 
        console.log("===== addInnerClick =====");
        this.setState(
            innerNum: ++this.state.innerNum,
        )
    

    render() 
        console.log("======== indexPage render ========");
        let  outerNum ,innerNum  = this.state;
        return (
            <div>
                <button className="addOuter" onClick=this.addOuterClick> add outer num</button>
                <button className="addInner" onClick=this.addInnerClick> add inner num</button>
                <p>outer num: outerNum   |   inner num: innerNum</p>
                <SubPage1 num=innerNum></SubPage1>
                <SubPage2 num=innerNum></SubPage2>
            </div>
        )
        
    


ReactDOM.render(<PageA />, document.querySelector('#content'));

// subPage1.jsx
export default class subPage1 extends Component 
    constructor(props)
        super(props);
    
    
    render() 
        console.log("======== subPage1 render ========");
        return (
            <React.Fragment>
                <h6>===subPage1===</h6>
                <h3 className="title">this.props.num</h3>
            </React.Fragment>
        )
    

// subPage2.jsx
export default class subPage2 extends PureComponent 
    constructor(props)
        super(props);
    
    
    render() 
        console.log("======== subPage2 render ========");
        return (
            <React.Fragment>
                <h6>===subPage2===</h6>
                <h3 className="title">this.props.num</h3>
            </React.Fragment>
        )
    

主页面index.jsx中有两个加数器：

• add outer num：控制index.jsx中的num
• add inner num：控制subPage1.jsx和subPage2.jsx中的num，通过props传递给子组件，不同的是subPage1.jsx用的Component，subPage2.jsx引用的PureComponent。

当点击add outer num按钮时，改变了index中的outer num，从控制打印信息可以看出：indexPage 和 subPage1都重新render了，但是 subPage2 没有重新render，可以看出，这里subPage2中的PureComponent 帮我们做了优化。

当点击add inner num按钮时，改变了index中的inner num，并且通过props传递给了子组件，从控制打印信息可以看出：indexPage 、 subPage1 和 subPage2 都重新render了，因为 subPage2 中的PureComponent检测到前后两个props不一样，所以做重新render。

使用PureComponent注意事项：

• PureComponent主要针对prop和state为基本数据类型，如bool、string、number；
• 对于数组和对象等引用类型，则要引用不同，才会渲染；如果引用相同，则PureComponent浅比较返回结果相同，不做render；如下subpage3中代码所示；

export default class subPage3 extends PureComponent 
    constructor(props)
        super(props);
        this.state = 
            data:
                num: 0
            
        
    

    handClick = () => 
        console.log("====== subpage3 click =======");
        let data = this.state.data;
        data.num = data.num++;
        this.setState(
            data
        )
    

    shouldComponentUpdate(nextProps, nextState) 
        return (nextState.data.num !== this.state.data.num);
    
    
    render() 
        console.log("======== subPage3 render object ========");
        return (
            <React.Fragment>
                <h6>===subPage3===</h6>
                <button onClick=this.handClick>add num</button>
                <h3 className="title">this.state.data.num</h3>
            </React.Fragment>
        )
    

• PureComponent 中不建议再另外重写shouldComponentUpdate方法，否则会报warning信息：
  react-dom.development.js:558 Warning: subPage3 has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.
• PureComponent的最好作为展示组件，如果prop和state每次都会变，PureComponent做浅比较也会影响性能，可以考虑直接用Component；
• 对于prop和state数据结构比较复杂的情况，可以考虑自己重写shouldComponentUpdate方法来做优化；