【react】---pureComponent的理解

一、pureComponent的理解

 

　　 pureComponent表示一個純組件，可以用來優化react程序。減少render函數渲染的次數。提高性能

　　pureComponent進行的是淺比較，也就是說如果是引用數據類型的數據，只會比較不是同一個地址，而不會比較這個地址里面的數據是否一致

　　淺比較會忽略屬性和或狀態突變情況，其實也就是數據引用指針沒有變化，而數據發生改變的時候render是不會執行的。如果我們需要重新渲染那么就需要重新開辟空間引用數據

　　好處：

　　當組件更新時，如果組件的props或者state都沒有改變，render函數就不會觸發。省去虛擬DOM的生成和對比過程，達到提升性能的目的。具體原因是因為react自動幫我們做了一層淺比較

 

二、例子

 

import React, { PureComponent } from "react";

export default class List extends PureComponent{
    constructor(){
        super();
        this.state = {
            userInfo:"李四",
            arr:[]
        }
        this.handleAdd = this.handleAdd.bind(this);
        this.handleModify = this.handleModify.bind(this);
    }
    render(){
        let {userInfo,arr} = this.state;
        return (
            <div>
                <h3>{userInfo}</h3>
                <ul>
                    {
                        arr.map((item,index)=>(
                            <li>{item}</li>
                        ))
                    }
                </ul>
                <button onClick={this.handleAdd}>添加</button>
                <button onClick={this.handleModify}>修改</button>
            </div>
        )
    }
    handleAdd(){
        //render函數不會執行 因為newArr還是引用這arr的地址 地址沒有發生改變
        let newArr = this.state.arr;
        newArr.push("姓名");
        this.setState({
            arr:newArr
        })
    }
    handleModify(){
        //會執行  因為會做淺比較
        this.setState({
            userInfo:"張三"
        })
    }
}

 

 

 

 

三、使用場景

　　  1、PureComponent一般會用在一些純展示組件上。切結props和state不能使用同一個引用

 　　 2、在通過PureComponent進行組件的創建的時候不能夠在寫shouldComponentUpdate. 否則會引發警告