抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

开发范式&底层框架

React Hooks

  • 彻底取代类组件

  • 启发了逻辑表达和逻辑复用的新范式:Vue组合API、Svelte3、SolidJS

React Hooks 带来的开发体验问题

React Hooks 是通过把组件的代码每一次更新都进行重复调用来模拟一些行为,导致了一些反直觉的一些限制:

  • 不能条件式调用

  • 过期闭包的心智负担

  • 手动声明 useEffect依赖

  • 如何正确使用 useEffect是个复杂的问题

  • 需要 useMemo/useCallback 手动优化

React团队对改善开发体验的努力

  • useEvent RFC

  • useEffect 文档改进

  • React Forget,通过编译时手段避免手动声明依赖

基于依赖追踪的范式重新得到重视

ReactVueEmberSolidJS
Recoil组合式APIStarbeanSolidJS

这些范式的共同点:

  1. 一次调用,符合原生JS直觉
  2. 自动依赖追踪,无需手动声明
  3. 引用稳定,无需useCallback

基于编译的响应式系统

Svelte、Vue Reactivity Transform、solid-labels

Svelte3Vue Reactivity Transformsolid-labels

第一种方案:

  • 只能在组件内使用
  • 组件外需要不同的API
  • 只能在顶层作用域使用,不可在函数体内使用

后面两种方案:可在组件和普通js/ts文件中使用
特点:

  • 利于长期的重构和复用:逻辑可以方便的拷贝到组件外
  • 底层实现的抽象泄露:需要先了解底层实现,才能去理解语法糖

基于编译的运行时优化

Svelte、Solid、Vue Vapor Mode

不同策略对生成代码量的影响

Svelte: 通过生成命令式的一个一个节点,然后把节点拼接这些 Javascript 代码,导致同等的组件源码之下 Svelte 每个组件的编译输出会更臃肿
Solid: 基于先生成一个基本的 HTML 字符串,然后在里面找到对应的 DOM 节点进行绑定

Vue Vapor Mode

输入输出

整体思路是一次性生成静态节点,然后找到动态节点进行状态绑定。

工具链层面

原生语言在前端工具链中的使用

  • 原生语言适用于用例专注且标准相对稳定的情况,否则很难榨取最大的性能优势
  • 原生语言会影响可扩展性,增加社区参与门槛,影响生态发展
  • JS/原生混合工具链将会成为常态

工具链的抽象层次

browserify\webpack\rollupParcel\Vue-CLI\create-react-appVite
专注于打包、抽象层次低专注于应用、抽象层次高CLI专注于应用,抽象层次高;API专注于支持上层框架,抽象层次中。Nuxt3、SvelteKit、Shopify、Hydrogen、Astro、Qwik、FastifyDX、Solid start、Laravel新默认前端方案

上层框架 MetaFramework

remix、nuxt、next等

JS全栈

做一些纯前端/纯后端做不到的事情,一个语言打通前后端

数据流的打通

NextNuxtRemix
getStaticProps
getServerSidePropsAPI路由
useFetch
顶层awaitloader
action
强化HTML表单

类型的前后端打通

  • 通过显式引用共享类型

  • 自动基于DB Schema生成类型

  • Nuxt3自动基于文件布局生成API/路由类型

全栈的代价

  • 数据渲染出了html,但是需要额外发送数据进行注水(hydrate)

  • 即使在客户端没有交互的组件,依然会被打包发送给客户端

  • hydrate影响页面交互指标 TTI

社区的探索方向:

评论