useContext ——React 个人学习笔记（7）

useContext

好像就是用来跨组件传数据,类似Vue的Provide,Inject吧

使用

创建Context

  const MyContext = React.createContext(defaultValue)

defaultValue是当组件不存在任何ContextProvider时的初始值,可以用null 但是官方建议提供一个有意义的值

那我不管

使用Context Provider

<MyContext.Provider value={{ name: 'John' }}>
      {/* 子组件 */}
    </MyContext.Provider>

在子组件中使用

import { useContext } from 'react'
import { MyContext } from './use-context'

function Child() {
  const contextValue = useContext(MyContext)
  return (
    <>
      {contextValue.toString()}
    </>
  )
}

export default Child

感觉要专门建个文件处理这些context

动态修改context

import React from 'react'
import Child from './child'

export const MyContext = React.createContext(false)

function Context() {
  const [value, setValue] = React.useState(false)
  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue(!value)} type="button">
        测试动态context值
      </button>
      <Child />
    </MyContext.Provider>
  )
}
export default Context

好像还说有性能问题,但是现在我先不管