React Hook: useContext

React Hook: useContext

介绍

• React.createContext(默认值): 创建一个 React 的 上下文
  • 默认值：对组件进行单元测试（组件并未嵌入到父组件中）
• useContext: 获取上下文

应用场景

• 组件之间需要共享状态（共享值，方法）
• 父组件 Provider 提供上下文 value
• 子组件 useContext 解析上下文

Demo

• 组件

import React, { useContext } from 'react'
import { Context } from './context'

const Children: React.FC = () => {
  const data = useContext(Context)
  // data {id: 2, text: "测试2222", other: "hahah"}
  return <div onClick={() => data?.fun && data?.fun()}>{data.text}</div>
}

const Children2: React.FC = () => {
  const data = useContext<{ id: number; text: string }>(Context)
  // data {id: 2, text: "测试2222", other: "hahah"}
  return <div>{data.text}</div>
}

const Demo: React.FC = () => {
  const newData = { id: 2, text: '测试2222' }

  const testFun = () => {
    console.log('testFun', newData.text)
  }

  return (
    <Context.Provider value={{ ...newData, other: 'hahah', fun: testFun }}>
      <Children />
      <Children2 />
    </Context.Provider>
  )
}

export default Demo

• context.ts

import { createContext } from 'react'

export const Context = createContext<{
  id: number
  text: string
  other?: string
  fun?: () => void
}>({
  id: 0,
  text: '测试'
})