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>
    )
}

結果