react中useContext的使用

react中useContext的使用

import React,{useState,createContext,useContext} from 'react';
/* 
    1.需要引入createContext,useContext
    2.通过createContext来创建句柄
    3.Context.Provider来确定共享范围
    4.通过value来分发内容
    5.在子组件中通过useContext（Context句柄）来获取数据
*/

const Context = createContext(null)

export default function UseContext(){
    const [num,setNum] = useState(1)
    return(
        <div>
            这是一个函数式组件 - {num}
            <Context.Provider value={num}>
                <Child1 />
                <Child2 />
            </Context.Provider>
        </div>
    )

}

function Child1(){
    const num = useContext(Context)
    console.log(num);
    return(
        <div>Child1---{num}</div>
    )
}

function Child2(){
    const num = useContext(Context);
    console.log(num);
    return(
        <div>Child2----{num}</div>
    )
}

结果