【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. 否则会引发警告

【react】---pureComponent的理解

猜你喜欢