[react 三篇杂乱但笔记齐全-第二篇] HOOK之我要学会useContext

组件之间是通过单向数据流传递信息，总是自上而下传递的。

但是这样子组件一多就很麻烦，可以通过useContext来直接传递，但是一般有的我还是会逐层传递

不说废话，直接上使用方法！！！

当然，在上方法前，我得废话几句，可能有的读者对这个知识点不怎么理解，我建议啊，百度搜一下Redux，点开官方文档，然后了解下Store、reducer、action、midleware(中间件，初次看的读者可以忽略)，接着看下原理，我记得有张图，说明了他们之间的关系，我当时看了我就理解了。

最后提醒一句，action是个对象，然后在redux里面通常把它封装成一个函数来返回，目的是能够接收参数。

读者：what？ 都说了不说废话了，你。。。。作者还在说废话，你不是找死吗？

作者：好了好了，别急嘛，在redux扯远了，上正题！！！

使用方法

1. 创建单独的文件夹，一般命名为store

① 创建js文件，一个js文件相当于一个模块

② context相当于一个公共的数据存储空间

2. 创建Context

通过const Xxx = React.creatContext(initialValue)创建

首字母必须大写，因为后面会被当组件使用

一般不会在模块内写数据，因为这样子就把数据写死了，所以需要通过provider让组件提供数据

3. 引出Context 模块

export default xxx

4. 提供数据

① 在提供数据的组件引入Context模块

② 用<Xxx.Provider></Xxx.Provider>包裹组件

③把数据通过属性写上去

5. 使用Context 模块访问数据

① 引入模块 import XXX from './store/xxx.js'

② 使用方法 1（麻烦，不是首选）

Ⅰ. 用<Xxx.Consumer></Xxx.Consumer>组件

consumer是自带的

Ⅱ. 然后还必须在组件下调用一个箭头函数{()=>{}}

Ⅲ. 箭头函数会调用，把模块创建的数据放到箭头函数的参数里面

Ⅳ. 通过箭头函数的返回值，返回我们创建的组件

③ 使用方法 2 (首选方法)

Ⅰ. 用钩子函数const xxx = useContext(Xxx)

钩子函数会从Xxx模块中获取数据并且返回，所以xxx会收到数据

6. 注意事项

如果用数据的组件不再标签内，那么就会访问初始值，如果在标签内，那么就会访问到提供的数据，且访问到离他最近标签的数据

---

【后记】小知识点就到这就结束啦，最后问大家一个问题，有几种方法访问数据呢？两种啦，太聪明了把，在这里也注意下注意事项哦！

如果本文章对你有帮助，请给我个关注，谢谢，同时，如果你乐意，可以看下第三篇文章。