前言：多层传递数据，有时候会很繁琐，如果不是特别大的项目，用redux也不是很方便，加上hook的火热，我在学习hook的时候，自己弄了个简单的数据管理，把需要的数据放到一个文件里，在需要的文件里引入就可以用，并且因为底层用的是state，所以可以实时更新页面

useContext

原理是用了useContext这个hookApi。

引入useContext

import React, {useContext} from "react";

创建实例，传入空【注】取名要大写，因为会用于标签

export const Test = React.createContext(null);

使用方法类似订阅者模式，我们在最外一层结构外套上我们的Context标签，传入数据

<Test.Provider value={"我是数据"}>
</Test.Provider>

然后在内部的组件，需要用的地方，用useContext获取数据

const value = useContext(Test);

但是在这里有个问题，内部获取数据用到的Text实例，是需要从创建的地方一层层传入进去的，这等于还是要多层结构传递数据，基本没什么用

于是我想，还是这个流程，但是换个方式来使用

既然我们的Context实例很多地方都需要用，我就创建一个context.jsx来专门创建实例

// context.jsx
export const Text = React.createContext(null);

然后在外层引入实例，并传入数据

import { Test } from "./context";
<Test.Provider value={"我是数据"}>
</Test.Provider>

内部使用的话，也可以直接引入实例，再获取数据

import { Test } from "./context";
const value = useContext(Test);

这样就不需要多层传递任何东西了，哪里需要哪里引入

修改数据

useContext底层使用的是state，所以当我们修改数据的时候，页面的数据会实时更新，那我们要怎么修改数据比较好，我自己使用的话，是在传入数据的时候，将修改数据的函数写到数据里，方便使用

const [data, setData] = useState({}) // 设置数据
cont item = {data:"我是数据"};
item.setContext = setData;
setData(item);

<Test.Provider value={item}>
</Test.Provider>

这样一个简单的数据管理结构就出来了，可以看数据，也能修改数据