Context 写法记录

import React, { createContext, useContext, useState, useCallback, useMemo, ReactNode } from 'react'

interface ReactContextData {
  // 替换为具体的状态类型
  value: string
  updateValue: (newValue: string) => void
}

const ReactContext = createContext<ReactContextData | underfined>(underfined)

export function ReactProvider({ children }: { children: ReactNode }) {
  const [value, setValue] = useState<string>('')

  // 使用 useCallback 保证函数引用稳定
  const updateValue = useCallback((newValue: string) => {
    setValue(newValue)
  }, [])

  // 使用 useMemo 包装 value，避免 Provider 自身重绘导致所有消费组件强制重绘
  const contextValue = useMemo(
    () => ({
      value,
      updateValue,
    }),
    [value, updateValue]
  )

  return <ReactContext.Provider value={contextValue}>{children}</ReactContext.Provider>
}

export function useReactContext() {
  const context = useContext(ReactContext)
  if (!context) {
    throw new Error('useReactContext must be used within a ReactProvider')
  }
  return context
}