系列文章传送门:
react 进阶必学 hook (一):useState 来一碗大碗宽面
react 进阶必学 hook (二):useEffect 专治不吃宽面
react 进阶必学 hook (三):useContext 面馆分店开张了
今天要讲的useContext,在讲之前还是先看面馆的例子:
面馆新需求
由于只卖宽面这一特色,以及老板的人格魅力使得面馆获得了非凡的人气,成了网红店;老板乘胜追击开了分店。分店开了,老板犯愁了😕,没法同时照顾两家店的生意只能看一家,但是另一家也得管啊,老板想到要数据化运营,于是就有了时刻知道两个面馆一共卖出多少面的需求。
同级组件的状态传递
react中也会遇到这种需要组件之间数据传递的情况,父子组件之间传递状态会经常用到也很好解决,那么同级组件之间传递状态如何解决呢?
方法大体有两种:
- 组件与组件之间有一个共同的父组件,可以通过父组件来通信,即一个子组件可以通过父组件的回调函数来改变props,从而改变另一个子组件的props。
- 组件与组件之间有共同的祖先,但不一定是亲兄弟,这样如果通过父组件一级一级去调用,效率会很差。React提供了一种上下文方式,允许子组件可以直接访问祖先组件的属性和方法,从而使效率得到很大的提升。
本文介绍的hook:useContext就是上面说的上下文方式。
useContext介绍
React官网是吧useContext和useState、useEffect一同称作基础hook,但是由于react-redux被普遍使用的原因,useContext出现并不是很多,可以算是hook大佬中的小透明。
官网对useContext的介绍如下:
提炼一下信息:
- context可以是非父组件,只要是祖先即可,而且是最近的那个
- 提取的是value值
- 上层组件或本组件context的value值更新都会重新渲染
- 使用下层组件需要使用
<MyContext.Provider>
包裹
面馆需求实现
1. 创建context
通过React的createContext创建一个context作为上下层沟通的上下文
export const context = createContext({
});
2. 创建一个上层组件,对面馆销售情况进行汇总, 完整代码如下:
import React, {
createContext, useState} from 'react'
import Counter from './Children_shop'
// 创建上下文
export const context = createContext({
});
export function