一、什么是useContext

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

二、useContext的作用

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

• 这里要注意的是，很多同学觉得可以使用useContext结合useReducer来替代redux，其实两者的作用是不同的。
• useContext：解决组件间传值的问题。
• redux：统一管理应用状态。
• 所以，我们可以使用useContext结合useReducer来模拟一个小型redux场景，而无法替代redux

2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

三、代码示例

1、新建example.tsx

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

const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
    </div>
  );
};

export default Example;

效果图

2、在example.tsx创建Context

const CountContext = createContext(0);

3、在example.tsx创建子组件Counter，通过useContext把刚刚创建好的CountContext作为参数传进去，并读取count值

const Counter = () => {
  const count = useContext(CountContext);
  return <p>子组件获得的点击数量：{count}</p>;
};

4、使用CountContext.Provider包裹需要接收参数的子组件，并通过value传值

<CountContext.Provider value={count}>
  <Counter />
</CountContext.Provider>

5、最终示例代码：

import React, { useState, createContext, useContext } from "react";
const CountContext = createContext(0);

const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  );
};

const Counter = () => {
  const count = useContext(CountContext);
  return <p>子组件获得的点击数量：{count}</p>;
};

export default Example;

运行效果图