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

一、定义

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

二、实现原理

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

三、示例

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

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

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

import { createContext } from 'react';
export const ContContext = createContext(null); //创建了自己的ContContext 

2. 包裹想要传递数据的所有组件：

import { ContContext } from './context'; //引入创建的ContContext 

 //value属性传递context
    
    

3. 在里:

import { ContContext } from './context'; //引入创建的ContContext 

const Component3= () => {
   const { setData } = useContext(ContContext); //解构出setData，和useState用法一样，把想要传递的值给setData 
   useEffect(() => {
    setData(1)   //此时data=1
   }, []);
}

4. 在包裹的任何组件里（为例）:

import { ContContext } from './context'; //引入创建的ContContext 

const Component1= () => {
   const { data } = useContext(ContContext); //解构出data
   useEffect(() => {
    console.log(data)   //此时data=1
   }, []);
}