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

一、Context

1. 理解

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

1. 使用

　　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>

1. 注意
   在应用开发中一般不用context, 一般都用它封装react插件
2. 代码

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子组件 ==> 效率低

1. 效率高的做法

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

1. 原因

　　　　Component中的shouldComponentUpdate()总是返回true

1. 解决

   　　方法1:

   　　 重写shouldComponentUpdate()方法
    　　比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

   　　 方法2:

    　　使用PureComponent
    　　PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
    　　注意: 
        　　只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
        　　不要直接修改state数据, 而是要产生新数据

   　　项目中一般使用PureComponent来优化

2. 代码

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} 
                <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>
        )
    }
}