近期技术生态更新

最近可能到年底了，都在冲 KPI，好多框架发布了更新，先看看一些好用的特性用起来。

React 19

更新文章：React v19

首先是 Actions，之前好像讲到过，新提供了一个 useActionState hook 来简化数据请求的流程，一个请求需要处理请求的数据，加载状态，返回的数据，错误信息等状态，所以之前一般会封装一个请求 hook 来处理，类似于如下代码。

const { data, loading, refetch, error } = useRequest(XXXAction);

改成使用新提供的 Hook

function AddToCartForm({itemID, itemTitle}) {
  const [message, formAction, isPending] = useActionState(XXXAction, null);
  return (
    <form action={formAction}>
      <h2>{itemTitle}</h2>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit">Add to Cart</button>
      {isPending ? "Loading..." : message}
    </form>
  );
}

然后是新增的 use 函数，它支持在条件语句中获取 Context，另外配合 Susponse 还可以实现加载中的展示，比如一个组件展示需要加载某些数据，那势必有个加载中的状态。

const loader = fetchData()

<Suspense fallback={<div>Loading...</div>}>
  <Child loader={loader} />
</Suspense>

这个跟 react-router 页面组件中 export function loader 还有 Remix router 的 loader 可以达到一样的效果，只不过一个组件级一个路由级。

然后还有支持预加载各种资源，进一步优化用户连续访问体验，除此之外的还有很多更新就不说了，可以点到更新文章中一个个查看。

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
  prefetchDNS('https://...') // when you may not actually request anything from this host
  preconnect('https://...') // when you will request something but aren't sure what
}

React Router V7

升级手册：Upgrading from v6
react router 每次大版本更新都在搞大活，这次也一样，把 Remix 给整合了进来，相当于从一个 library 变成了一个 framework，但是还好还支持 library 方式使用。

从更新手册上来看，多了跟多需要配置的东西，还有一些兼容性问题，所以目前看来不推荐直接升级。

Vite V6

Vite 因为是底层框架，所以并不会像开发框架一样新增什么或者更改什么特性，一般都是内部的更新。

这个版本更倾向于一个过渡版本就像 React 17 一样，放出来了一些实验性的 API，来在这个版本周期内供开发者测试。

Tailwind V4 Beta

更新文档：Tailwind CSS v4.0 Beta
Tailwind 这次更新挺大的，调整了很多东西，得益于新的引擎，首先是性能上增量更新直接提升了八倍，全新构建也提升了三倍。

然后是配置上，之前更新主题要在配置文件中更新，现在支持了直接在 CSS 中修改，之前 content 还要配置筛选的文件格式，现在也不需要了变成自动检测了。

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  ...
}

其他的就是一些原生 CSS 的支持，比如 layer 和 container query，还有 3D 变换之类的写法新增。