如何看待由react router原班人马打造并获得三百万美元融资的ts全栈开发框架remix?

作者:ahabhgk
链接:https://www.zhihu.com/question/502743886/answer/2581357729
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

感觉很摩登啊~

刚听说 Remix 的时候我的反应可能和大多数人一样,以为又是一个类似 Next.js 的框架,没啥兴趣,之后听了 Ryan Florence 在 Reactathon 2022 的演讲对 Remix 产生兴趣,之后认真看了一遍官网和源码,也看了 Remix 的一些 blog 和其他的演讲,觉得 Remix 和其他框架还是很不一样的,让人眼前一亮。

Remix 其实很简单,作者也在 blog 中说了:“Just a compiler and server for React-Router”,主要分为以下几部分:

  • Compiler:@remix-run/dev 这个包,基于 esbuild 和一堆插件实现了 dev 和 build。
  • Server:@remix-run/{adaptor} 这些包,其实就是 @remix-run/server-runtime 上包了一层,提供对各个平台的封装。
  • Client:@remix-run/react 这个包,里面依赖了 react-router

然后来看看 Remix 的一些特性吧,首先就是路由文件中的“前后端一体化”:

import stylesUrl from "../styles/index.css";

// 声明 head 中的信息
export const meta = () => {
  return {
    title: "Remix: It's funny!",
    description: "Remix Remix Remix",
  };
};

// 声明依赖的资源文件
export const links = () => {
  return [{ rel: "stylesheet", href: stylesUrl }];
};

// 负责数据获取
export const loader = async ({ request }) => {
  const res = await db.getData(request);
  return json(res);
}

// 负责修改数据,data mutation
export const action = async ({ request }) => {
  const res = await db.setData(request);
  return json(res);
}

// React 组件
export default function IndexPage() {
  return (
    <div>{/* ... */}</div>
  )
}

其中 meta、links 会运行在浏览器上,loader、action 会运行在 Server 上,而 default 导出的组件在浏览器和 Server 上都会运行(SSR),前端后端的代码都可以写在一个文件中,逻辑更加内聚,Remix 的 Compiler 通过 esbuild 的 treeshake,build client 时会把不需要的 server 代码 treeshake 掉,build server 时会把不用的 client 代码 treeshake 掉。

第二个就是 prefetch 预获取。得益于导出的 links 声明了路由所需要的静态资源文件,加上 Compiler 使用 esbuild build 后得到的 metafile,可以知道每个路由依赖于那些资源文件,包括依赖的 JS chunk、样式文件、图片等,因此在用户鼠标晃到 Link 上时就可以对 Link 的路由中的所有资源文件并行的做 prefetch,抢跑几百毫秒,在用户真正点击进去时已经加载一部分资源了。

然后是嵌套路由解决的请求瀑布问题。文件中导出的 loader 就是用来干这个用的,这个可以看上文提到的演讲:When To Fetch: Remixing React Router,演讲者从 Remix 的嵌套路由通过提前并发的 fetch 解决请求瀑布问题,再通过 SSR、SSG 再到 React18 推出的 Streaming SSR 一步步优化加载速度,配合图例解释的非常清楚,非常推荐这篇演讲,其优化思路对很多项目都会有所帮助。演讲讲的比较清楚了,我也对其做过一篇总结提到了一些细节的地方,这里就不再赘述了。

最后就是 data mutation,也算 Remix 中最大的亮点吧,对应文件中导出的 action。Remix 推荐全部使用 Form 来修改数据(至于为啥可以看 Ryan Florence - Why The Form? Data Mutations on the Web - RenderATL 2022),一些 button、checkbox、多选框都可以用 Form 套一层,将修改数据的请求通过 Form 来发送,Remix 的 Server 就会调用 action 进行处理,同时因为 loader 和 action 都导出给 Remix,也算一种控制反转吧,其控制权在了 Remix 手上,因此 Remix 可以在调用 action 进行数据修改后重新调用 loader 进行数据更新,除此之外 Remix 还可以自动处理 race conditions、interruptions 等,也得益于控制权的反转。Remix 的 Youtube 上还有一系列视频通过写 demo 对此进行了更详细的介绍,感兴趣可以看看。

Remix 的 loader 和 action 组合起来使用的效果其实非常强大,开发者可以将何时请求、取消请求、请求状态的变更(loading、error)等逻辑全部交给 Remix 去处理,开发者只需要定义如何通过 request 得到 response 即可,Remix 与请求的关系就像 React 与 DOM 一样,即我们可以通过 Remix 写“声明式”请求,Remix 的 blog 也有一篇更详细的介绍:Data Flow in Remix

除此之外还有些其他优点,比如无 JS 也能用啥的,这些就不做介绍了。

当然除了优点外还是有缺点的,最大的就是 Compiler 是基于 esbuild 的,esbuild 速度快的优点它有,缺点也全有,比如:没有 HMR,插件生态不足,没有可配置的拆包等。Remix 作者的推特中也提到过将 Compiler 迁移到 vite 上的想法,不过不知道要到什么时候了。。

另外提一下 Remix 最近在做啥(我观察到的),Remix 团队发现 Remix 上的很多东西其实就是一些 Runtime 代码,可以下沉到 React Router 上,React Router 也可以抽出一个与框架无关的核心,很多也可以下沉到这个 router 核心上面,这样就可以有 remix-vue、remix-svelte…… 了,有兴趣的朋友可以参与一下。

posted on 2022-11-07 13:27  漫思  阅读(119)  评论(0编辑  收藏  举报

导航