React 19 的 use() Hook 到底解决了什么问题

React 19 出了有一段时间了，其中 `use()` Hook 可能是最低调但最有用的新特性。很多人觉得"不就是个异步数据获取的 Hook 吗"，其实远不止这些。 ## 先看问题 以前在组件里获取数据，你得这样写： ```javascript function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchUser(userId) .then(setUser) .catch(setError) .finally(() => setLoading(false)); }, [userId]); if (loading) return ; if (error) return ; return {user.name}; } ``` 三个 state + useEffect + 条件渲染，一个简单的数据获取写了这么多样板代码。 ## use() 怎么解决 ```javascript function UserProfile({ userId }) { const user = use(fetchUser(userId)); return {user.name}; } ``` 就这么简单。loading 状态交给外层的 `` 处理，错误交给 `` 处理。组件本身只关心"拿到数据之后做什么"。 ## 不只是语法糖 `use()` 背后其实是 React 对"组件应该关注什么"这个问题的重新思考： 1. **数据获取不应该是副作用**：useEffect 本质上是在组件渲染后触发副作用，但数据获取更像是渲染的前提条件。`use()` 把数据获取从"副作用"提升为"渲染依赖"。 2. **loading/error 状态不应该在每个组件里处理**：这些横切关注点应该在组件树的更上层统一处理。 3. **可以在条件语句中使用**：这是 `use()` 和其他 Hooks 最大的区别——它不受 Hooks 规则限制，可以在 if 语句里调用。 ## 注意事项 - `use()` 接收的是 Promise 或 Context，不是其他东西 - 配合 Suspense 使用效果最好 - 服务端组件（RSC）里更推荐直接 await 总的来说，`use()` 代表了 React 在"声明式数据获取"方向上的重要一步。如果你还在用 useEffect + useState 获取数据，可以考虑迁移了。