【React Hooks 学习笔记】useContext

这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战

大家好，我是前端西瓜哥。今天简单说说 React Hooks 的 useContext。

useContext 用于获取 React 的 Context 对象。

const value = useContext(MyContext);

React 的 Context 指的是组件上下文的意思，用于简化子组件跨多层中间组件和上层组件的通信问题。

如果用 props 一个个往下传，直接人传晕了。而且以后如果中间组件又套多了几个，又要补上对应 props，这不利于组件的通用化。

比如你需要子组件可以修改上层组件的状态，传入了一个 setState 方法，此时 Context 是非常不错的方案。

useContext() 会拿到离它最近的 Context.Provider，即拿到向上最近的 <MyContext.Provider value={myValue}>）的 value。如果找不到，则会使用 createContext 时传入的默认值。

下面我们不妨看个例子。

import React, { createContext, useContext, useState } from 'react'

const CounterContext = createContext(() => { console.log('默认值') });

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={setCount}>
      <div>
        <div>count { count }</div>
        <A />
      </div>
    </CounterContext.Provider>
  )
}

function A() {
  const setCount = useContext(CounterContext); // 拿到 Counter 下的 setCount
  return (
    <div>
      <button onClick={() => { setCount(pre => pre + 1) }}>加一</button>
    </div>
  )
}

还是一个定时器，但这次我们将 count 状态的更新方法提供给它的子组件。这里为了更专注于核心逻辑，所以故意写简单点，只有一个子组件。

我们先通过 createContext 创建一个 Context，并提供一个默认函数。

我们的 A 组件，找到的最近的 provider 是位于 Counter 组件下的 setCount 更新函数，然后 A 组件就成功通过这个方法更新了 Counter 组件的状态。

如果你把 <CounterContext.Provider /> 组件移除，你会发现点击 A 组件下的按钮后，只会在控制台输出 “默认值”，因为 A 组件找不到 Provider，使用了默认函数。

默认函数很少会用到，起一个兜底的作用。