useContext

概述

在Hooks出来之前，开发者都是使用的class组件，通过props传值。现在使用方法组件（Function）开发了，没有constructor构造函数也就没有了props的接收，所以父子组件的传值就成了一个问题。 React Hooks就为我们准备了 useContext 来解决这个问题。

const value = useContext(MyContext)

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

别忘记 useContext 的参数必须是 context 对象本身：

• 正确✔： useContext(MyContext)
• 错误✖： useContext(MyContext.Consumer)
• 错误✖： useContext(MyContext.Provider)

注意

如果你在接触 Hook 前已经对 context API 比较熟悉，那应该可以理解，useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>。

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。

作用

可以帮助我们跨越组件层级直接传递变量，实现数据共享。

示例

Counter组件：

import React, { useContext } from "react"
import Button from '@mui/material/Button'

function Counter(props) {
  const { count, setCount } = useContext(props.context)

  return <Button variant="outlined" onClick={() => setCount(count - 1)} style={{marginLeft: 15}}>递减（Counter）</Button>
}

export default  Counter

Live Editor

function CountContext() { const Base = createContext(null) const [count, setCount] = useState(0) return ( <div> <p>当前点击次数：{count}</p> <Button variant="outlined" onClick={() => setCount(count + 1)}>递增（CountContext）</Button> <Base.Provider value={{count, setCount}}> <Counter context={Base} /> </Base.Provider> </div> ) }

function CountContext() {
  const Base = createContext(null)
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>当前点击次数：{count}</p>
      <Button variant="outlined" onClick={() => setCount(count + 1)}>递增（CountContext）</Button>
      
      <Base.Provider value={{count, setCount}}>
        <Counter context={Base} />
      </Base.Provider>
    </div>
  )
}

Result

Loading...