一、什么是useContext

二、useContext的作用

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

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;

                                                                     运行效果图

链接：https://www.jianshu.com/p/cc91178724d5