react context 上下文，相信大家都会使用。不会的可查看。详情的概念这里不介绍，只接受在函数组件中，使用context hooks 的使用
语法
const value = useContext(MyContext);
- 接收一个参数，是一个上下文对象，需要使用 react.createContext这个对象
- 返回的结果是consumer的结果
- useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用<MyContext.Provider>来为下层组件提供 context。
案例
原始写法
import React from 'react' interface ICtxP { name: string, age: number } // 创建一个上下文，初始化值 const ctx = React.createContext<ICtxP>({name: 'twinkle', age: 18}) // 文本组件 function TextComp(){ return( <> <ctx.Consumer> {value => ( <> <p>名字： {value.name}</p> <p>年龄: {value.age}</p> </> )} </ctx.Consumer> </> ) } // 测试组件 export default function TestContextComp() { return ( <div> <ctx.Provider value={{name: 'cll', age: 18}}> <TextComp/> </ctx.Provider> </div> ) }
原始写法的效果
使用contextHook 写法
import React, { useContext } from 'react' // 上下文数据的结构 interface ICtxP { name: string, age: number } // 创建一个上下文 const ctx = React.createContext<ICtxP>({ name: 'twinkle', age: 18 }) // 文本组件 function TextComp() { // 直接使用上下文hook const value = useContext(ctx); return ( <> <p>名字： {value.name}</p> <p>年龄: {value.age}</p> </> ) } export default function TextContextHook() { return ( <div> <ctx.Provider value={{name: 'cll', age: 18}}> <TextComp/> </ctx.Provider> </div> ) }
效果
结论
useContext 这个hooks 减少了myContext.consumer 结构的写法，防止多重上下文的嵌套，减少了代码量，但是myContext.provider 还是需要和原来的写法一样，估计在未来react 官方也会把这个给简化掉，毕竟 hooks 的目的就是使组件的结构更加的简单和纯粹
