useContext - Choria

props 搬运从哪开始难受#

主题要从最外层传到第四层的导航：

1
function App() {
2
  return <Layout theme="dark" />
3
}
4

5
function Layout({ theme }) {
6
  return <Sidebar theme={theme} />
7
}
8

9
function Sidebar({ theme }) {
10
  return <Nav theme={theme} />
11
}

Layout 与 Sidebar 都不用 theme，它们只是搬运工。再加两三个这样的参数，每加一个都要改中间所有组件的签名。

Context 的三步#

第一步，建一个 Context：

1
import { createContext } from 'react'
2

3
const ThemeContext = createContext('light')

第二步，在上层提供值。React 19 起 Context 自己就能当 Provider：

1
function App() {
2
  const [theme, setTheme] = useState('dark')
3

4
  return (
5
    <ThemeContext value={theme}>
6
      <Toolbar />
7
    </ThemeContext>
8
  )
9
}

第三步，需要的地方直接读，中间层不用出现：

1
function Nav() {
2
  const theme = useContext(ThemeContext)
3
  return <nav className={theme}>导航</nav>
4
}

关于写法要说明一句：<ThemeContext.Provider value={...}> 这种老写法现在仍然能跑，读旧代码会看到。官方说将来会弃用 .Provider（React 19 发布说明），新代码用第一种。

默认值什么时候生效#

createContext('light') 里的 'light' 只在上方一个 Provider 都没有时生效，它不是兜底值。上方有 Provider 但 value 传了 undefined，读到的就是 undefined。

value 变了，所有消费者都会重渲染#

Provider 的 value 是对象时，只要每次渲染都新建一个对象，引用就变了，所有消费者都会重渲染，哪怕内容一模一样。用 useMemo 把引用固定住：

1
// 每次渲染都是新对象，消费者全部重渲染
2
<AuthContext value={{ user, setUser }}>
3

4
// 引用只在 user 变化时改变
5
const value = useMemo(() => ({ user, setUser }), [user])
6
<AuthContext value={value}>

别急着上 Context#

官方给的顺序是先试两件更轻的事：继续传 props；中间层只是搬运时，抽成组件并用 children 传 JSX。

第二件值得记住，它常常能直接消掉对 Context 的需求：

1
function Layout({ children }) {
2
  return <div className="layout">{children}</div>
3
}
4

5
function App() {
6
  return (
7
    <Layout>
8
      <Nav theme="dark" />
9
    </Layout>
10
  )
11
}

Nav 由 App 直接渲染，Layout 不必认识 theme。真正的「全局」数据（主题、语言、登录态）再交给 Context。判断方法见官方 Passing Data Deeply with Context。

与 useReducer 搭配#

跨多层共享的状态，常见形态是把 state 与 dispatch 一起放进 Context，改法仍然集中在 reducer 里：

1
const AuthContext = createContext(null)
2

3
function AuthProvider({ children }) {
4
  const [state, dispatch] = useReducer(authReducer, { isLogin: false })
5
  const value = useMemo(() => ({ state, dispatch }), [state])
6

7
  return <AuthContext value={value}>{children}</AuthContext>
8
}

这样消费组件拿到的是两样东西：现在的状态，和声明「发生了什么」的 dispatch。官方在 Scaling Up with Reducer and Context 里给了完整形态。

几条边界#

就近匹配。组件树上有多个同类型 Provider 时，读到的是最近的那一个。

默认值写成 null、消费处判空并抛错，是常见做法。这样漏包 Provider 会立刻报出来，而不是悄悄用默认值跑下去。

useContext 是 Hook，只能在组件或自定义 Hook 的顶层调用，条件和循环里不行。如果确实需要在条件里读 Context，用 use()，它不受这条限制（use）。

当海风翻页时

props 搬运从哪开始难受#

Context 的三步#

默认值什么时候生效#

value 变了，所有消费者都会重渲染#

别急着上 Context#

与 useReducer 搭配#

几条边界#

React 19 学习笔记

继续阅读

换条路线

当海风翻页时

props 搬运从哪开始难受#

Context 的三步#

默认值什么时候生效#

value 变了，所有消费者都会重渲染#

别急着上 Context#

与 useReducer 搭配#

几条边界#

分享文章

沿着主题读

换条路线