useContext

React Context 是一种全局管理状态的方法

它可以与 useState Hook 一起使用，比单独使用 useState 更容易地在深层嵌套的组件之间共享状态

问题所在

状态应该由堆栈中需要访问状态的最高父组件持有

为了说明，我们有许多嵌套组件。 堆栈顶部和底部的组件需要访问状态

要在没有 Context 的情况下执行此操作, 我们需要将状态作为“props”传递给每个嵌套组件。 这称为“props 钻井”

实时编辑器

// 通过嵌套组件传递 "props": function Component1() { const [user, setUser] = useState("Jesse Hall") return ( <> <h1>{`Hello ${user}!`}</h1> <Component2 user={user} /> </> ) } function Component2({ user }) { return ( <> <h1>Component 2</h1> <Component3 user={user} /> </> ) } function Component3({ user }) { return ( <> <h1>Component 3</h1> <Component4 user={user} /> </> ) } function Component4({ user }) { return ( <> <h1>Component 4</h1> <Component5 user={user} /> </> ) } function Component5({ user }) { return ( <> <h1>Component 5</h1> <h2>{`Hello ${user} again!`}</h2> </> ) } render(<Component1 />)

// 通过嵌套组件传递 "props":
function Component1() {
  const [user, setUser] = useState("Jesse Hall")
  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  )
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  )
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  )
}

function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  )
}

function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  )
}

render(<Component1 />)

结果

Loading...

即使组件 2-4 不需要状态，它们也必须传递状态，以便它可以到达组件 5

解决方案

解决方案是创建上下文

Create Context

要创建上下文，您必须导入 createContext 并对其进行初始化:

import { useState, createContext } from "react"

const UserContext = createContext()

接下来我们将使用 Context Provider 来包装需要状态 Context 的组件树

Context Provider

在 Context Provider 中包装子组件并提供状态值

function Component1() {
  const [user, setUser] = useState("Jesse Hall")
  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  )
}

现在，这棵树中的所有组件都可以访问用户上下文

使用 useContext Hook

为了在子组件中使用 Context, 我们需要使用 useContext Hook 来访问它

首先，在导入语句中包含 useContext:

import { useState, createContext, useContext } from "react"

然后就可以在所有组件中访问用户 Context 了:

function Component5() {
  const user = useContext(UserContext)

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  )
}

完整用例

实时编辑器

const UserContext = createContext() function Component1() { const [user, setUser] = useState("Jesse Hall") return ( <UserContext.Provider value={user}> <h1>{`Hello ${user}!`}</h1> <Component2 /> </UserContext.Provider> ) } function Component2() { return ( <> <h1>Component 2</h1> <Component3 /> </> ) } function Component3() { return ( <> <h1>Component 3</h1> <Component4 /> </> ) } function Component4() { return ( <> <h1>Component 4</h1> <Component5 /> </> ) } function Component5() { const user = useContext(UserContext) return ( <> <h1>Component 5</h1> <h2>{`Hello ${user} again!`}</h2> </> ) } render(<Component1 />)

const UserContext = createContext()

function Component1() {
  const [user, setUser] = useState("Jesse Hall")
  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  )
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  )
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  )
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  )
}

function Component5() {
  const user = useContext(UserContext)
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  )
}

render(<Component1 />)

结果

Loading...