在Cursor中开发React项目时，应使用Context管理跨层级状态，通过创建AuthContext、顶层包裹Provider、useContext消费及自定义Hook封装实现主题切换、登录态等全局状态共享，避免props层层传递。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中开发React项目时，用Context管理跨层级组件的状态，避免层层props传递，尤其适合主题切换、用户登录态、全局配置等场景。
创建Context并提供初始值
在src目录下新建context/AuthContext.js（以登录态为例）：
输入const AuthContext = React.createContext();→按Tab自动补全完整结构→把const [user, setUser] = useState(null);写进Provider组件的内部状态里→确保value={{ user, login, logout }}包含所有需共享的数据和方法。
这一步漏掉value属性会导致Consumer读不到任何内容，整个Context形同虚设。
在应用顶层包裹Provider
打开src/main.jsx或index.js，找到根组件渲染位置。
把<authcontext.provider value="{...}"></authcontext.provider>包在<router></router>或<react.strictmode></react.strictmode>最外层→确保所有需要消费Context的组件都在其子树内。
【必须包裹到最顶层，否则子组件useContext会返回undefined】
改完后保存，Cursor会自动热更新，不用手动刷新浏览器。
在任意组件中消费Context
方法一：使用useContext Hook（推荐）
在目标组件顶部写const { user, login } = useContext(AuthContext);→直接解构使用→注意不能在条件语句或循环里调用useContext。
方法二：用Context.Consumer（仅适用于类组件或JSX内联）
写<authcontext.consumer>{({ user }) => <div>{user?.name}</div>} </authcontext.consumer>→这种写法在函数组件里显得冗余，Cursor里优先用Hook。
方法三：自定义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，应改用事件处理器包裹。
