useContext详细说明与使用

一、什么是useContext

在Hooks之前，react开发者都是使用class组件进行开发，父子组件之间通过props传值。但是现在开始使用方法组件开发，没有constructor构造函数，也就没有了props的接收，所以父子组件的传值就成了一个问题。

于是，就有了useContext。

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

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

二、useContext作用

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

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

三、代码示例

1、创建父组件

import React,{useContext, useState, createContext} from 'react';
import {Button} from 'antd';
import '../../App.css';

const CountContext = createConte