前言:多层传递数据,有时候会很繁琐,如果不是特别大的项目,用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>
这样一个简单的数据管理结构就出来了,可以看数据,也能修改数据