React中createContext初始值被使用，Provider提供的自定义值未生效如何解决

问题根因 #

你在 App 组件函数体内调用 useTheme 时，当前组件还没有被 CustomThemeProvider 包裹，因此只能拿到 ThemeContext 的初始默认值。

React 组件的执行逻辑是：先执行组件函数的全部顶层代码，再处理返回的JSX渲染逻辑。你的 App 组件先执行 const { isDark, toggleTheme } = useTheme()，此时上下文还没有被 ThemeContext.Provider 覆盖，自然拿到的是默认的警告函数，后续渲染的 CustomThemeProvider 只会对它内部的子组件生效，对父级的 App 组件本身无效。

修复方案 #

把使用 useTheme 的逻辑抽离到 CustomThemeProvider 内部的子组件中即可，修改后的App.tsx参考代码：

//App.tsx
// 抽离内部业务逻辑为单独组件
const MainPage = () => {
  const { isDark, toggleTheme } = useTheme()
  return (
    <Box flex={1} justifyContent="center">
      <Paper title="Test Title">
        <Switch onValueChange={toggleTheme} value={isDark} />
      </Paper>
    </Box>
  )
}

export default function App() {
  return (
    <CustomThemeProvider>
      <MainPage />
    </CustomThemeProvider>
  )
}

可选优化点 #

你当前的 toggleTheme 函数会在每次 isDark 变化时重新生成，导致 providerTheme 频繁更新触发不必要的重渲染，可以修改为如下写法，降低重渲染开销：

// CustomThemeProvider.tsx
const toggleTheme = useCallback(() => {
  console.log('Change theme')
  setDark(prev => !prev) // 用函数式更新读取最新的isDark值
}, [])

内容的提问来源于stack exchange，提问作者JonasLevin