06 useContext基础用法
useContext概念解释
我们第三个要学习的Hook(钩子函数)是useContext,他的作用是“勾住”获取由React.createContext()创建、<XxxContext.Provider>
添加设置的共享数据value值。useContext可以替代<XxxContext.Consumer>
标签,简化获取共享数据的代码。
我们知道,原本不同级别的组件之间传递属性值,必须逐层传递,即使中间层的组件不需要这些数据。
注意:这里说的组件指React所有组件,包含类组件和函数组件。
数据层层传递增加了组件的复杂性,降低了可复用性。为了解决这个问题,我们可以使用以下方式:
1、在组件顶层或单独的模块中,由React.createContext()创建一个共享数据对象;
2、在父组件中添加共享数据对象的引用,通过且只能通过<XxxContext.provider value={xx:'xxx'}></XxxContext.provider>
的形式将数据传递给子组件。请注意传值必须使用value={obj}
这种形式,若值本身为字符串则可以改为 value='xxx';
3、若下一层的子组件用不到共享数据对象中的数据,则可以不做任何属性标签传递;
4、若某一层的子组件需要用到共享数据对象的数据,则可通过<XxxContext.Consumer></XxxContext.Consumer>
获取到数据;
5、在类组件中除了<XxxContext.Consumer>
标签,还有另外一种获取共享数据方式:static xxx = XxxContext; 但是这种形式在函数组件中无法使用。
简而言之<XxxContext.Provider>
用来添加共享数据、<XxxContext.Consumer>
用来获取共享数据。
备注:provider单词本意为供应者、consumer单词本意为消费者,刚好对应他们相对于共享数据的关系。
上面简单描述了React.createContext()的用法,由于本系列文章主要讲Hook的使用方法,React本身的知识点并不是重点讲解对象。若你对React.createContext()、<XxxContext.Provider>
、<XxxContext.Consumer>
的用法还不太明白,请通过其他途径自行学习。
让我们回到useContext学习中。
useContext是来解决什么问题的?
答:useContext是<XxxContext.Consumer>
的替代品,可以大量简化获取共享数据值的代码。
补充说明:
1、函数组件和类组件,对于<XxxContext.Provider>
、<XxxContext.Consumer>
使用方式没有任何差别。
2、你可以在函数组件中不使用useContext,继续使用<XxxContext.Consumer>
,这都没问题。只不过使用useContext后,可以让获取共享数据相关代码简单一些。
useContext函数源码
回到useContext的学习中,首先看一下React源码中的ReactHooks.js。
//备注:源码采用TypeScript编写,如果不懂TS代码,阅读起来稍显困难
export function useContext<T>(
Context: ReactContext<T>,
unstable_observedBits: number | boolean | void,): T {
const dispatcher = resolveDispatcher();
if (__DEV__) {
if (unstable_observedBits !== undefined) {
console.error(
'useContext() second argument is reserved for future ' +
'use in React. Passing it is not supported. ' +
'You passed: %s.%s',
unstable_observedBits,
typeof unstable_observedBits === 'number' && Array.isArray(arguments[2])
? '\n\nDid you call array.map(useContext)? ' +
'Calling Hooks inside a loop is not supported. ' +
'Learn more at https://fb.me/rules-of-hooks'
: '',
);
}
// TODO: add a more generic warning for invalid values.
if ((Context: any)._context !== undefined) {
const realContext = (Context: any)._context;
// Don't deduplicate because this legitimately causes bugs
// and nobody should be using this in existing code.
if (realContext.Consumer === Context) {
console.error(
'Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +
'removed in a future major release. Did you mean to call useContext(Context) instead?',
);
} else if (realContext.Provider === Context) {
console.error(
'Calling useContext(Context.Provider) is not supported. ' +
'Did you mean to call useContext(Context) instead?',
);
}
}
}
return dispatcher.useContext(Context, unstable_observedBits);
}
上述代码看不懂没关系,本系列教程只是讲述“如何使用Hook”,并不是“Hook源码分析”。之所以贴出源码只是想让你看懂以后告诉我,反正我是没看懂。^_^
useContext基本用法
useContext(context)函数可以传入1个参数,该参数为共享数据对象的实例,useContext函数会返回该共享对象实例的value值。
代码形式
import GlobalContext from './global-context'; //引入共享数据对象
function Component(){
const global = useContext(GlobalContext); //在函数组件中声明一个变量来代表该共享数据对象的value值
//若想获取共享数据对象中的属性xxx的值,直接使用global.xxx即可
return <div>
{global.xxx}
</div>
}