# 2022 前端技术趋势
TIP
原作者： 尤雨溪
# 底层框架
# React Hooks
- Func Component 逐渐取代了 Class Component
- 启发了组件表达逻辑和逻辑复用的新范式
- Vue Composition API
- Svelte
- SolidJS
# React Hooks 的开发体验问题
- Hooks执行原理
- 不能条件式调用
- 过期闭包的问题
- 必须手动声明 useEffect
- 需要 useMemo / useCallback 手动优化
# React 团队的努力
- useEvent RFC 改善 useCallback 的问题
- useEffect 新文档 (@Dan Abramov)
- React Forget 编译时优化开发体验 (@黄玄)
# 依赖追踪的编程范式
- Solid JS
- Vue Composition API
- Ember Starbeam
solid
// state
const [count, setCount] = createSignal(0)
// effect
createEffect(() => console.log(`${count()}`))
// update
setCount(count() + 1)
vue
const count = ref(0)
watchEffect(() => console.log(count.value))
count.value++
starbeam
const count = Cell(0)
DEBUG_RENDERER.render({
render:() => console.log(count.current)
})
count.set(prev => prev + 1)
# 依赖追踪范式的共同点
- 一次调用，符合原生 JS 直觉
- 自动追踪依赖，无需手动声明
- 引用稳定，无需 useCallback
# 基于编译的响应式系统
- svelte
- vue reactivity transform
- solid-laabels
svelte
let count = 0
// label 语法
$:console.log(count)
count++
- 只能在组件内使用
- 只能在组件顶层作用域使用
vue
let count = $ref(0)
watchEffect(()=>console.log(count))
coount++
solid-labels (opens new window)
let count = $signal(0)
$effect(()=>console.log(count))
count++
# 基于编译的运行时优化
- Svelte
- Solid
- Vue Vapor Mode
# 工具链
# 原生语言在前端工具链中的使用
- esbuild (go)
- swc (rust)
- bun (zig)
- parcel2 (js/rust)
- vite (js via esbuild)
- napi-rs (rust)
(JS/原生)混合工具链将会成为常态
# 工具链的抽象层次
专注打包
- browserify
- webpack
- rollup
专注应用
- parcel
- vue-cli
- create-react-app
- cra
灵活
- vite cli 应用
- vite api 中层
# 上层框架
# 数据的前后端打通
- Next getStaticProps / getServerSideProps
- Nuxt useFetch + Top Level await
- Remix loader / action + enhanced HTML Form
# 类型的前后端打通
- 通过显式的引入共享类型
- 自动基于数据库的 schema 生成类型
- Nuxt3 自动基于文件布局生 API/ 路由类型
# JS 全栈的代价
- 数据渲染HTML，还需要额外发送一份数据用于 Hydrate
- 没有交互的组件也会被打包
- Hydrate 影响页面交互指标
# 社区的探索方向
- Server-only Components (Next, Nuxt)
- Partial hydration (Astro, Fresh)
- Fine-grained + resumable hydration (Qwik)
- Shell + partial hydration (VitePress)