React 19 用到的新特性

最新推荐文章于 2025-05-31 09:58:45 发布

前端砖家^_^

最新推荐文章于 2025-05-31 09:58:45 发布

阅读量1k

点赞数 12

分类专栏： React 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/html5_mylove/article/details/147599800

版权

最近在关注 React 19 的变化，比如 use、ref、useOptimistic 乐观更新等。

use：请求接口，请求等待中，显示 loading，请求成功，展示数据。接收一个 Promise，会阻塞 render 继续渲染，需要配套 <Suspense> 处理 loading，配套 <ErrorBoundary> 来处理异常。

ref 支持返回一个 cleanup 函数，在组件卸载时会调用该函数。

useOptimistic 乐观更新：收藏点赞的场景，用户触发后，立即更新 UI，如果请求失败后，再回滚 UI。

use

use 是 React 19 新增的一个特性，支持处理 Promise 和 Context。

假如我们要实现这样一个需求：请求接口数据，请求过程中，显示 loading，请求成功，展示数据。

以前我们可能会这样写代码

function ReactUseDemo() {
  const [data, setData] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    getList()
      .then((res) => {
        setData(res);
        setLoading(false);
      })
      .catch(()