react 优化的问题之PureComponent的使用

react 优化的问题之PureComponent的使用！

废话不多说，直接进入正题

PureComponent是什么？它是干啥的？用它的好处是啥？怎么用？

带着这个问题往下看

	1：先看父子组件

//这是父组件代码
import React,{ Component } from 'react'
import ChildBtn from "../btn/index"
class Home extends Component{
    constructor(props){
        super(props);
    }
    state = {
        num:0,
        child1:'add'
    }
    btnAdd = () => () => {
        let { num } = this.state;
        let newNum = num+=1;
        this.setState({
            num:newNum
        })
    }
    render(){
        let { num, child1 } = this.state;
        return(
            <div className = "box">
                <ChildBtn val = { child1 }></ChildBtn>
                <br/>
                <div>
                    {num}
                    <br/>
                    <br/>
                    <br/>
                    <button onClick = { this.btnAdd() }>点击</button>
                </div>

            </div>
        )
    }
}

export default Home

		在父组件中引入了一个叫ChildBtn这么一个子组件！每次点击的时候调用btnAdd这个函数方法！使state
中的num递加

//这是子组件
import React,{ Component } from "react";

export default class BtnChild extends Component{
    state = {
        child:"AAAAAAA"
    }
    componentDidMount(){
        console.log(this.state.child,"子组件渲染了----didMount", this.props)
    }
    render(){
        let { child } = this.state;
        console.log(child,"????????????????123123123.")
        return(
            <div>
                <div>
                    {child}
                </div>
            </div>
        )
      
    }
}

      这里的子组件就纯纯的一个展示的作用哈；可以忽略

要做的是点击父组件上的按钮；使数字递加；你会发现子组件什么都没动，但是父组件从新render的时候子组件会跟着重新渲染！

如果子组件大的话怎么办呢？ 每次重新渲染多么的损耗性能？（难道非要使用shouldComponents去if判断props是否改变？费劲巴拉的）

就在这个时候， 天空一声巨响 PureComponent（15.3版本好像）闪亮登场！

使用方法简单的令人发指，只需要从react中解构出来就好了
看子组件

它是针对有状态组件的

下面看无状态组件可咋整？

//请看代码

function Child(){
    console.log("child 重新渲染了")
    return(
        <div>
            我是子组件
        </div>
    )
}

export default Child

一样的套路，

import React from 'react'

function Child(){
    console.log("child 重新渲染了")
    return(
        <div>
            我是子组件
        </div>
    )
}

export default React.memo(Child)
//    注意 React.memo方法接受俩参数 第一个参数是组件，第二个参数相当于条件吧，就是用于对比props,
//来决定是否从新渲染的！

我认为，这俩方法类似于对组件的props进行浅比较，来决定是否从新渲染的！如果有说的不对的地方，烦请指正，咱们互相学习！共同进步！