React use 如何在条件语句中读取 Promise？

Question

仓乃文 · Accepted Answer

React 规定 Hook 不能在条件语句中调用，但 use 是个例外。use 可以在循环和条件语句中读取 Promise 和 Context，实现条件性数据加载。条件性读取 Promise： ```javascript function UserProfile({ userId, showDetails }) { if (showDetails) { const user = use(fetchUser(userId)); // 条件中调用 use 读取 Promise return

{user.name}

; } return

点击查看详情

; } ``` 条件性读取 Context： ```javascript function ThemeText({ useTheme }) { if (useTheme) { const theme = use(ThemeContext); // 条件中读取 Context return

主题文字

; } return

默认文字

; } ``` 配合 Suspense 使用： ```javascript function App() { return ( }> ); } ``` 补充说明： - use 是 React 19 新增的 Hook，是唯一可以在条件语句中调用的 Hook - use 读取未 resolved 的 Promise 时会触发 Suspense - use 读取 Context 等价于 useContext，但可以在条件语句中使用 - 传入的 Promise 应该是缓存过的，否则每次渲染都创建新 Promise 会无限请求 - 推荐配合 React Cache（实验中）或第三方库如 SWR 的 preload 使用