context了解一下

來(lái)一個(gè)示例：

const FahterContext = React.createContext({})

//頂層組件
class Father extends React.Component{
    render(){
        const value = {
            name : 'william',
            job : 'front-end engineer'
        }
        return (
            <FahterContext.Provider  value={value} >
                <Son/>
            </FahterContext.Provider >
        )
    }
}
//子組件
class Son extends React.Component{
    render(){
        return (
            <div>
                <Grandson/>
            </div>
        )
    }
}
//最深層組件
class Grandson extends React.Component{

    getProps(value){
        return (
            <div>
                name : {value.name}
                <br/>
                job : {value.job}
            </div>
        )

    }

    render(){
        return (
            <FahterContext.Consumer>
                { value => this.getProps(value) }
            </FahterContext.Consumer>
        )
    }
}