react函数式组件（hooks）之useContext

---

一、useContext是什么？

useContext接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。在代码中是MsgContext

当组件上层最近的 <MyContext.Provider> 在代码中是<MsgContext.Provider value={{msg: "你好世界"}}>更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo(memo具有缓存作用) 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

官网：react

二、代码

import React, {createContext, useContext} from 'react'
// 
const MsgContext = createContext()

// 子组件
function Sub(){
	// 使用useContext调用上下文空间
    const {msg} = useContext(MsgContext);
    return <h2>子组件：{msg}</h2>
}

// 父组件
function Father(){
    return <Sub />
}

// 顶级组件
export default function App(){
    return (
    // value中是需要传递的值
        <MsgContext.Provider value={{msg: "你好世界"}}>
            <Father  />
        </MsgContext.Provider>
    )
}

代码可以看出，在顶级组件中传递的值可以在子组件中拿到，不需要采用父传子的方式。