1 useState
2 useEffect
3 useContext
4 useReducer
3 useContext() 共享状态钩子
useContext
的作用是 实现数据共享,解决组件间传值 的问题,可以跨组件层级直接传递变量。即是对它所包含的组件树提供全局共享数据的一种技术。
3.1 创建 Context
根组件引入 createContext
方法,并创建 Context
import React, {
createContext } from 'react';
const ContextName = createContext();
3.2 向后代组件传值
在根组件中使用 ContextName.Provider
组件包裹需要接受数据的后代组件,
并通过 value
属性提供要共享的数据。
<ContextName.Provider value={
count}>
<Child />
</ContextName.Provider>
3.3 后代组件获取传递进来的值
在后代组件中使用 useCountext
获取根组件传递进来的值,
向 useContext
传入根组件中定义的ContextName
import React, {
useContext } from 'react';
const Child = () => {
const count = useContext(ContextName);
return <p>子组件获得的点击数量:{
count}</p>;
};
3.4 完整示例
import React, {
useState, createContext, useContext } from "react";
const ContextName = createContext();
const Child = () => {
// 后代组件
const count = useContext(ContextName);
return <p>子组件获得的点击数量:{
count}</p>;
};
const Parent = () => {
// 根组件
const [count, setCount] = useState(0);
return (
<div>
<p>父组件点击数量:{
count}</p>
<button onClick={
() => setCount(count + 1)}>{
"点击+1"}</button>
<ContextName.Provider value={
count}>
<Child />
</ContextName.Provider>
</div>
);
};
export default Parent;