React-Context使用

一、AppContext.js

import React, { Component } from 'react';

export const Context = React.CreateContext();
export const Provider = Context.Provider;
export const Consumer = Context.CConsumer;

二、App.js

import React from 'react';
import Home from './pages/Home';
import { Provider } from './AppContext'; 

const store = {
	home: {
		imgs: [{
			"src": "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/49973/2             /8672/125419/5d679259Ecd46f8e7/0669f8801dff67e8.jpg! cr_1125x445_0_171!q70.jpg.dpg"
		}]
	},
	user: {
		isLogin: true,
		userName: "true"
	}
}

function App(){
    return (
        <div className='app'>
            <Provider value={store}>
                <Home/>
            </Provider>
        </div>
    )
}

三、Home.js

import React, { Component } from 'react'; 
import { Consumer } from '../AppContext';

export defalut class Home extends from Component{
    render(){
        return (
            <Consumer>
                {
                    ctx => <HomeCmp ...ctx/>
                }
            </Consumer>
        )
    }
}

function HomeCmp(props) {
    const {home, user} = this.props;
    const {isLogin, userName} = user;
    return (
         <div> 
            { isLogin ? userName : '登录'}   
         </div> 
    )
}

四、useContext

import React, { useContext } from 'react';

const Context = React.createContext();
const Provider = Context.Provider;

export defalut function HookContext(){
    const store = {
        userName: 'liming'
    };

    return (
        <div>
            <h1>HookContext</h1>
            <Provider value={store}>
                <Child/>
            </Provider>
        </div>
    )
}

function Child(props){
    const { userName } = useContext(Context);
    return (
        <div>userName: {userName}</div>
    )
}