import React,{createContext} from 'react';
import ReactDOM from 'react-dom';
let {Provider, Consumer}  = createContext();

//统一状态管理
class ProviderComponent extends React.Component{
    state={
        a:1,
        b:22
    }
    changeDataA = (a) =>{
        this.setState({a})
    }
    render(){
        return (<Provider value={{
            state:this.state,
            onChangeDataA:this.changeDataA
        }}>
            {this.props.children}
        </Provider>)
    }
}

class Child extends React.Component{
    render(){
        return (<div>
            <Consumer>
                {(data)=>
                    <div>
                        <h3>{JSON.stringify(data)}</h3>
                        <button onClick={()=>data.onChangeDataA(10)}>更改</button>
                    </div>
                }
            </Consumer>
        </div>)
    }
}

class App extends React.Component{
    render(){
        return (<div>
            <Child></Child>
        </div>)
    }
}


class App2 extends React.Component{
    render(){
        return (<div>
            <Consumer>
                {(data)=>
                    <h3>{data.state.a}</h3>
                }
            </Consumer>
        </div>)
    }
}

ReactDOM.render(
    <ProviderComponent>
        <App />
        <App2 />
    </ProviderComponent>
    , document.getElementById('root'));