react 进阶hook 之 context Hook

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 的目的就是使组件的结构更加的简单和纯粹