【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的理解

最新文章

热门文章