在 Cursor 中开发 React 项目时，建议使用 Context 管理跨层级状态。通过创建 AuthContext、在应用顶层包裹 Provider、使用 useContext 进行消费，并结合自定义 Hook 封装，可以实现主题切换、登录状态、全局配置等全局状态共享，从而避免 props 一层层向下传递。
在 Cursor 里开发 React 项目时，使用 Context 管理跨组件、跨层级的状态是一种更高效的方式，能够减少繁琐的 props 透传，特别适用于主题切换、用户登录态管理以及全局配置共享等常见开发场景。
创建Context并提供初始值
在 src 目录下新建 context/AuthContext.js（以下以用户登录状态管理为例）：
先输入const AuthContext = React.createContext();，然后按 Tab 让 Cursor 自动补全完整结构。接着，将const [user, setUser] = useState(null);放入 Provider 组件内部作为状态管理。最后，确认value={{ user, login, logout }}中已经包含所有需要对外共享的数据和操作方法。
这一步如果遗漏value属性，Consumer 或 useContext 将无法读取任何共享内容，整个 Context 机制也就失去了作用。
在应用顶层包裹Provider
打开 src/main.jsx 或 index.js，找到根组件的渲染入口位置。
将
【必须包裹到应用最顶层，否则子组件调用 useContext 时会返回 undefined】
修改完成后保存文件，Cursor 通常会自动触发热更新，无需手动刷新浏览器页面。
在任意组件中消费Context
方法一：使用 useContext Hook（推荐）
在目标组件顶部写const { user, login } = useContext(AuthContext);→可以直接解构并使用对应数据和方法→同时要注意，不能在条件语句或循环中调用 useContext。
方法二：使用 Context.Consumer（适用于类组件或 JSX 内联场景）
写 {user?.name}
方法三：通过自定义 Hook 进行封装（提高复用性）
新建 hooks/useAuth.js，导出 const useAuth = () => { const context = useContext(AuthContext); if (!context) throw new Error("useAuth must be used within AuthProvider"); return context; }。这样一来，其他组件就可以直接 import useAuth() 后统一调用，代码会更清晰，也更便于维护。
更新Context状态并触发重渲染
第一步：在 Provider 内部定义 login 函数，并通过 setUser 更新用户状态
第二步：在登录表单组件中调用const { login } = useContext(AuthContext);
第三步：表单提交时执行login({ id: 1, name: "Alice" });→此时所有使用 useContext(AuthContext) 的组件都会同步接收到新的 user 值并自动重新渲染。
第四步：检查 Console 中是否出现“Warning: Cannot update a component from inside the function body of a different component”——如果出现，通常说明你在非事件回调中直接调用了 login，此时应改为通过事件处理函数进行包裹后再执行。