Hooks中的useContext

useContext

useContext的作用
useContext可以帮助我们跨越组件层级直接传递变量，实现共享，而无需手动一个一个在多个父子孙之间传递prop。

useContext也称为上下文

• 全局变量是全局的上下文
• 上下文是局部的全局变量

使用方法如下：

• 1、使用C = createContext(initial)创建上下文
• 2、使用<C.provider>圈定作用域
• 3、在作用域内使用useContext(C)来使用上下文

例子1:

const NumberContext = React.createContext();
export default function App(){
    return (
        <NumberContext.Provider value={42}>
            <div>
                <Display/>
            </div>
        </NumberContext.Provider>
    )
}
function Display(){
    const value = React.useContext(NumberContext)
    return (<div>the answer is {value}.</div>)
}

渲染结果为:

例子2：

import React from 'react';

const C = React.createContext(null)

export default function App(){
    const [n,setN] = React.useState(0);
    return (
        <C.Provider value={{n,setN}}>
           <div className="App">
               <Baba/>
           </div>
        </C.Provider>
    )
}
function Baba(){
    const {n,setN} = React.useContext(C)
    return (
        <div>
            我是爸爸n: {n} <Child/>
        </div>
    )
}
function Child(){
    const {n,setN} = React.useContext(C)
    const onClick = () => {
        setN(i=>i+1)
    }
    return (
        <div>我是儿子 我得到的n: {n}
         <br/>
         <button onClick={onClick}>+1</button>
        </div>
    )
}

渲染结果为: