React---新扩展Context和组件优化

一、Context

1. 理解

　　 一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

2. 使用

　　1) 创建Context容器对象：

    　　const XxxContext = React.createContext()  

    

　　2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

    　　<xxxContext.Provider value={数据}>

        　　子组件

    　　</xxxContext.Provider>

    

　　3) 后代组件读取数据：

   　　 //第一种方式:仅适用于类组件 

      　　static contextType = xxxContext  // 声明接收context

      　　this.context // 读取context中的value数据

      

    　　//第二种方式: 函数组件与类组件都可以

     　　 <xxxContext.Consumer>

      　　  {

          　　value => ( // value就是context中的value数据

           　　 要显示的内容

          　　)

       　　 }

      　　</xxxContext.Consumer>

3. 注意

    在应用开发中一般不用context, 一般都用它封装react插件

4. 代码

import React, { Component } from 'react'
import './index.css'

//创建Context对象
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext
export default class A extends Component {

    state = {username:'tom',age:18}

    render() {
        const {username,age} = this.state
        return (
            <div className="parent">
                <h3>我是A组件</h3>
                <h4>我的用户名是:{username}</h4>
                <Provider value={{username,age}}>
                    <B/>
                </Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div className="child">
                <h3>我是B组件</h3>
                <C/>
            </div>
        )
    }
}

/* class C extends Component {
    //声明接收context
    static contextType = MyContext
    render() {
        const {username,age} = this.context
        return (
            <div className="grand">
                <h3>我是C组件</h3>
                <h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
            </div>
        )
    }
} */

function C(){
    return (
        <div className="grand">
            <h3>我是C组件</h3>
            <h4>我从A组件接收到的用户名:
            <Consumer>
                {value => `${value.username},年龄是${value.age}`}
            </Consumer>
            </h4>
        </div>
    )
}

二、optimize组件优化

1. Component的2个问题 

　　　　 1)只要执行setState(),即使不改变状态数据, 组件也会重新render()

　　　　 2) 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低

2. 效率高的做法

　　　　只有当组件的state或props数据发生改变时才重新render()

3. 原因

　　　　Component中的shouldComponentUpdate()总是返回true

4. 解决

    　　方法1: 

       　　 重写shouldComponentUpdate()方法

        　　比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

   　　 方法2:  

        　　使用PureComponent

        　　PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

        　　注意: 

            　　只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  

            　　不要直接修改state数据, 而是要产生新数据

    　　项目中一般使用PureComponent来优化

5. 代码

import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {

    state = {carName:"奔驰c36",stus:['小张','小李','小王']}

    addStu = ()=>{
        /* const {stus} = this.state
        stus.unshift('小刘')
        this.setState({stus}) */

        const {stus} = this.state
        this.setState({stus:['小刘',...stus]})
    }

    changeCar = ()=>{
        //this.setState({carName:'迈巴赫'})

        const obj = this.state
        obj.carName = '迈巴赫'
        console.log(obj === this.state);
        this.setState(obj)
    }

    /* shouldComponentUpdate(nextProps,nextState){
        // console.log(this.props,this.state); //目前的props和state
        // console.log(nextProps,nextState); //接下要变化的目标props，目标state
        return !this.state.carName === nextState.carName
    } */

    render() {
        console.log('Parent---render');
        const {carName} = this.state
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                {this.state.stus}&nbsp;
                <span>我的车名字是：{carName}</span><br/>
                <button onClick={this.changeCar}>点我换车</button>
                <button onClick={this.addStu}>添加一个小刘</button>
                <Child carName="奥拓"/>
            </div>
        )
    }
}

class Child extends PureComponent {

    /* shouldComponentUpdate(nextProps,nextState){
        console.log(this.props,this.state); //目前的props和state
        console.log(nextProps,nextState); //接下要变化的目标props，目标state
        return !this.props.carName === nextProps.carName
    } */

    render() {
        console.log('Child---render');
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        )
    }
}