React之context数据传值

在react中，组件的传值方式一般都是通过props属性来进行传递数据的，对于简单的组件来说是适用的，但是对于一些极其复杂的组件来说是非常致命且难以维护的，Context就提供了这样的一种解决方案，不用通过组件一层一层的向下传递到指定的组件中。

一、简单示例

在以下的示例代码中，将会简单的展示如何使用一个context，例子中用了PageComp、Comp01、Comp023个嵌套组件来实现这样一个需求，从最高层级的PageComp组件中将数据传递给Comp02中并展示出来，按照以往传统的做法是通过props层层的向下传递，但是现在有了context就不用这么繁琐了。

import React from 'react'

// 这里给的是一个默认值，当没有匹配到Provider的时候，就会使用这个默认值
const MyContext = React.createContext("my Data1!")

class PageComp extends React.Component{
    
    
    render(){
    
    
        return(
            <div className="container-page">
            	// 注意：每当Provider中的value值发生改变，它内部所有使用的组件都会重新渲染
                <MyContext.Provider value="传递的data">
                    <Comp01 />
                </MyContext.Provider>
            </div>
        )
    }
}

// 中间组件
class Comp01 extends React.Component{
    
    
    render(){
    
    
        return(
            <div>
                <Comp02 />
            </div>
        )
    }
}

class Comp02 extends React.Component{
    
    
    static contextType = MyContext
    render(){
    
    
        return(
            <div>context中的数据展示：{
    
     this.context }</div>
        )
    }
}

二、更新context

在深层嵌套的组件中更新context是很有必要的，我们通过以下的一个例子来尝试更新context。

const MyContext = React.createContext({
    
    
    myData:"my Data!",
    changeData:()=>{
    
    }
})

interface InterfaceState{
    
    
    myData:string
    changeData:any
    count:number
}
// 高层级组件
class Page03 extends React.Component<any,InterfaceState>{
    
    
    constructor(props:any){
    
    
        super(props)
        this.state = {
    
     
            count:0,
            myData:"",
            changeData:this.changeData
        }
    }
    changeData=()=>{
    
    
        this.setState( 
            (state:any)=>({
    
    
                count:state.count+1
            })
        )
    }
    render(){
    
    
        return(
            <div className="container-page">
                <MyContext.Provider value={
    
     this.state }>
                    <Comp01 />
                </MyContext.Provider>
            </div>
        )
    }
}

// 中间组件
class Comp01 extends React.Component{
    
    
    render(){
    
    
        return(
            <div>
                <Comp02 />
            </div>
        )
    }
}

// 低层级组件
class Comp02 extends React.Component{
    
    
    static contextType = MyContext
    render(){
    
    
        const {
    
    count,changeData} = this.context
        return(
            <div>
                我的数据：{
    
     count }
                <Button onClick={
    
     changeData }>按钮改变context中的状态</Button>
            </div>
        )
    }
}