一、什么是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;
运行效果图
