Provider Pattern 提供者模式
最后更新：2026-10-28
Provider Pattern 提供者模式
Provider 模式把「数据 + 修改方法」封装成有状态的 Provider 组件和配套 Hook：内部用 useState/useReducer 管状态，经 Context 向下提供，外部只管 useXxx() 读写。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const Ctx = createContext(null)
export function AppProvider({ children }) {
const [state, setState] = useState(initial)
return <Ctx.Provider value={{ state, setState }}>{children}</Ctx.Provider>
}
export const useApp = () => useContext(Ctx) // 配套读取 Hook返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点按钮后购物车实时变为「购物车（1）：苹果」——状态集中在 CartProvider 管理，ItemList 通过 useContext 读写。💡 要点
💡 提示 Provider + useContext + 自定义 Hook 是手写轻量全局状态的标配三件套，小项目不必上 Redux。
ℹ️ 说明 把 state 和更新函数一起放进 value，消费方读写双向打通；Provider 放在需要它的最小公共祖先处。
⚠️ 注意 value 是内联对象时，Provider 每次渲染都会让全部消费者重渲染——用 useMemo 稳定它。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Provider 应该放在组件树哪一层？
A 放在所有消费者的最小公共祖先处，范围越小越好，减少不必要的重渲染波及面。
Q value 为什么要用 useMemo 包一层？
A value 是内联对象时每次渲染都是新引用，所有消费者被迫重渲染；useMemo 缓存引用可避免。
Q Provider 模式和 Redux 的区别？
A Provider 模式是 React 内置能力，适合中小规模；Redux 提供统一的 action 流水线、中间件与调试工具，适合大型应用。
