现代前端框架设计哲学踩坑记录

作者: 醉月思发布日期: 2024-06-18 分类: 技术实践

框架选择这东西，

这次项目重构，从 Vue 迁移到 React，中间踩了一些坑，也重新理解了前端框架的设计哲学。

项目一开始用 Vue，原因很简单：

学习曲线平缓
官方文档清晰
单文件组件写起来舒服

最初的选型

项目一开始用 Vue，原因很简单：

学习曲线平缓
官方文档清晰
单文件组件写起来舒服

代码大概是这个样子：

<template>
  <div>
    <input v-model="message" placeholder="输入消息">
    <p>{{ message }}</p>
    <button @click="increment">计数: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

简单直接，写起来很顺手。

迁移到 React

后来项目需要迁移到 React，原因主要有两个：

团队更多人熟悉 React
生态更成熟，第三方库更多

基础组件迁移

Vue 的单文件组件迁移到 React 后：

import { useState } from 'react';

function MyComponent() {
  const [message, setMessage] = useState('');
  const [count, setCount] = useState(0);

  return (
    <div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="输入消息"
      />
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>
        计数: {count}
      </button>
    </div>
  );
}

踩坑一：响应式 vs 手动更新

Vue 的响应式系统很方便，数据变了视图自动更新。迁移到 React 后，发现要手动管理更新：

// Vue：数据变了自动更新
this.list.push(item)

// React：需要手动创建新数组
setList([...list, item])

sequenceDiagram participant Vue as Vue响应式 participant State as 数据状态 participant View as 视图 Note over Vue,View: Vue 自动更新 State->>Vue: 数据变化 Vue->>View: 自动更新视图 participant React as React手动 Note over React,View: React 手动更新 State->>React: 数据变化 React->>React: 需要手动setState React->>View: 触发重渲染

解决：习惯了不可变数据的思维后，反而觉得更清晰——每次状态变化都是明确的。

踩坑二：模板 vs JSX

Vue 的模板语法很直观，React 的 JSX 起初不太习惯：

<!-- Vue 模板 -->
<div v-for="item in list" :key="item.id">
  {{ item.name }}
</div>

// React JSX
{list.map(item => (
  <div key={item.id}>
    {item.name}
  </div>
))}

但后来发现 JSX 的优势：

JavaScript 的全部能力都可以用
类型检查更准确
组件逻辑和模板更内聚

踩坑三：组件通信

Vue 的组件通信方式很多：

<!-- 父组件 -->
<ChildComponent :message="parentMessage" @update="handleUpdate" />

<!-- 子组件 -->
<script>
export default {
  props: ['message'],
  methods: {
    handleClick() {
      this.$emit('update', newValue)
    }
  }
}
</script>

React 的方式更直接：

// 父组件
<ChildComponent message={parentMessage} onUpdate={handleUpdate} />

// 子组件
function ChildComponent({ message, onUpdate }) {
  return (
    <button onClick={() => onUpdate(newValue)}>
      更新
    </button>
  )
}

性能对比

项目迁移后，对比了一下性能：

指标	Vue	React
首次渲染	快	中等
响应速度	快	中等
内存占用	中等	高
包体积	小	大

但差别在可接受范围内，而且 React 的生态优势更明显。

框架选择的本质

迁移完之后，意识到框架选择的本质是权衡：

graph TB subgraph Vue的优势 A[学习曲线平缓] B[响应式系统方便] C[单文件组件] D[官方工具链完善] end subgraph React的优势 E[生态更成熟] F[灵活性更高] G[类型支持更好] H[社区更大] end subgraph Svelte的优势 I[运行时性能更好] J[编译时优化] K[包体积更小] L[语法更简洁] end style A fill:#90EE90 style E fill:#FFD700 style I fill:#87CEEB

什么时候用 Vue

团队对 Vue 更熟悉
项目规模中小型
需要快速开发
希望官方推荐的技术栈

什么时候用 React

项目规模大型复杂
团队对 React 更熟悉
需要大量第三方库
对灵活性要求高

什么时候用 Svelte

对性能要求极高
希望包体积小
团队愿意尝试新技术
项目规模不大

写在最后

框架迁移这东西，不是技术先进就行，还要考虑团队能力和项目需求。

React 的虚拟 DOM 和 Vue 的响应式，本质是不同的设计哲学。虚拟 DOM 强调不可变和批量更新，响应式强调自动更新和依赖追踪。

Svelte 的编译时优化又是一个思路——运行时不占资源，编译时多做事。

选框架不是选最好的，而是选最适合的。

这次迁移花了两个月，中间有过犹豫。但回头看，理解不同框架的设计哲学，对技术决策确实有帮助。

版权声明: 本文首发于指尖魔法屋-现代前端框架设计哲学踩坑记录（https://blog.thinkmoon.cn/post/21-frontend-framework-design-philosophy/）转载或引用必须申明原指尖魔法屋来源及源地址！