React----Hooks函数组件----useContext

一、定义

        useContext可以实现跨越组件层级，实现数据共享。

二、实现原理

        使用createContext 创建一个上下文对象，用useContext来接收这个对象，在.Provider包裹想要传递数组的所有组件，当组件上层最近的 <ContContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递的value 值，以实现跨组件的数据传递。

三、示例

问题：现在有三个组件，<Component1/>,<Component2/>，<Component,3/>，大概的关系是，1和2是兄弟组件，3是2的子组件，现在需要2的数据传递给1.

解决思路：创建一个createContext 名为ContContext，在最外层使用<ContContext.Provider>包裹，在想要传递数据的组件中使用一个回调setData保存值，在想要接收数据的组件接收值data。

1. 创建一个context.js文件：