Hooks-useContext

/**hooks Context
 * ！！！不要滥用Context，因为会破坏组件独立性
 * useContext：解决的是组件之间值传递的问题
    redux：是应用中统一管理状态的问题
    但通过和useReducer的配合使用，可以实现类似Redux的作用。
 * 可以使用多个useContext获取各自的Context值了，而类组件的Context只能有一个
 */

import React,{useState, useContext, createContext} from 'react';
const CountContext = createContext();
const NameContext = createContext();

export default function App(){
    const [count, setCount] = useState(0);
    const [name, setName] = useState('wee');

    const change = ()=>{
        setCount(count+1);
        setName(name+'e');
    }
    return(
        <div>
            <button onClick={change}>click</button>
            <CountContext.Provider value={count}>
                <NameContext.Provider  value={name}>
                <Foo/>
                </NameContext.Provider>
            </CountContext.Provider>
        </div>
    )
}

function Foo(){    
    return(
        <div>
        <Chirld/>
        </div>
    )
}
function Chirld(){    
    const count = useContext(CountContext);
    const name = useContext(NameContext);
    console.log(count,name)
    return(
        <div>
            {count}
            {name}
        </div>
    )
}