createContext
createContext
创建一个上下文对象,可以用于在组件树中共享数据,而不必通过 props 手动传递。
createContext()
会返回一个上下文对象,其中包含两个重要属性:
- Provider: 用于提供上下文的组件。
- Consumer: 用于消费上下文的组件。
Provider 提供数据
javascript
import React, { createContext, useState } from 'react';
// 创建一个 Context上下文对象
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [value, setValue] = useState('Hello World');
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};
export { MyProvider, MyContext };
通常放在顶级组件
javascript
<MyProvider>
<App />
</MyProvider>
Consumer 使用数据
javascript
const MyComponentUsingConsumer = () => {
return (
<MyContext.Consumer>
{({ value, setValue }) => (
<div>
<p>{value}</p>
<button onClick={() => setValue('New Value from Consumer')}>
Change Value
</button>
</div>
)}
</MyContext.Consumer>
);
};
useContext
获取上下文对象,可以理解为简化版的 Consumer,可以直接从上下文对象中解构出 数据。
javascript
import { useContext } from 'react';
const MyComponentUsingHook = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
<p>{value}</p>
<button onClick={() => setValue('New Value from useContext')}>
Change Value
</button>
</div>
);
};
应用场景
如实时监听窗口大小
javascript
import React, {
createContext,
useContext,
useEffect,
useState,
ReactNode,
} from "react"
// 定义上下文的类型
interface SizeData {
width: number
height: number
isLarge: boolean
}
// 创建上下文并设置默认值为 SizeData 类型
const MyContext = createContext<SizeData | undefined>(undefined)
interface MyProviderProps {
children: ReactNode
}
// 创建 Provider 组件
export const MyProvider: React.FC<MyProviderProps> = ({ children }) => {
const isLarge = () => window.innerWidth > 1024
const [sizeData, setSizeData] = useState<SizeData>({
width: window.innerWidth,
height: window.innerHeight,
isLarge: isLarge(),
})
useEffect(() => {
let timer: number
const handler = () => {
clearTimeout(timer)
timer = setTimeout(() => {
setSizeData({
width: window.innerWidth,
height: window.innerHeight,
isLarge: isLarge(),
})
}, 200)
}
window.addEventListener("resize", handler)
return () => {
window.removeEventListener("resize", handler)
clearTimeout(timer)
}
}, [])
return <MyContext.Provider value={sizeData}>{children}</MyContext.Provider>
}
// 创建自定义 Hook
export const useSize = (): SizeData => {
const context = useContext(MyContext)
// 处理 context 为 undefined 的情况
if (!context) {
throw new Error("useSize must be used within a MyProvider")
}
return context
}
main.tsx
javascript
createRoot(document.getElementById("root")!).render(
<StrictMode>
<MyProvider>
<App />
</MyProvider>
</StrictMode>
)
使用
javascript
const { width, height, isLarge } = useSize()