一、前端框架认知：React vs Vue vs Angular

说实话，我见过太多产品经理被前端框架搞晕了。

「React、Vue、Angular，到底有什么区别？」「为什么技术团队总在争论用哪个？」「我该不该参与框架选型？」

这些问题，我几乎每周都会被问到。今天咱们就把这三个框架掰开揉碎，讲清楚。

1.1 三大框架的核心差异

先给个直观对比。我习惯用一张表来概括：

维度 React Vue Angular
出身 Facebook（2013） 尤雨溪（2014） Google（2010）
核心思想 一切皆组件 渐进式框架 一站式解决方案
学习曲线 中等（JSX需适应） 平缓（模板语法友好） 陡峭（TypeScript+依赖注入）
数据绑定 单向数据流 双向绑定（语法糖） 双向绑定（原生）
适用场景 大型应用、跨平台 中小型、快速迭代 企业级、复杂业务

嗯，这里要注意：这张表只是参考。实际选型要看团队和业务。

我的个人经验：如果你团队里都是老手，选React没错。如果新人多、项目急，Vue更友好。Angular嘛…适合那种「一个项目做三年」的企业级系统。

1.2 组件化思想——前端开发的基石

说白了，组件化就是把页面拆成一个个独立的小块。

就像搭积木。每个组件有自己的HTML、CSS、JavaScript。可以复用，可以组合。

举个例子，一个搜索框组件：

// React 组件示例
function SearchBox({ placeholder, onSearch }) {
  const [keyword, setKeyword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(keyword);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder={placeholder}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

你想想看，这个组件可以在首页用，也可以在商品列表页用。传不同的placeholder和回调函数就行。

我在项目中遇到过最典型的坑：有人把整个页面写成一个组件，几千行代码。后来改需求，改到崩溃。这就是不懂组件化的后果。

产品经理需要知道：组件化意味着「可复用」。你提需求时，可以问技术：「这个按钮/弹窗/列表，之前有没有现成的组件？」能省很多开发时间。

1.3 状态管理——Redux vs Vuex

先问个问题：为什么需要状态管理？

因为组件多了，数据传递就乱了。A组件改了数据，B组件不知道。C组件需要的数据，在D组件的孙子组件里…

这时候就需要一个「中央仓库」来统一管理数据。

React生态里最常用的是Redux，Vue生态里是Vuex。其实核心思想一模一样：

  • Store：唯一数据源，整个应用的状态都放在这里
  • Action：描述「发生了什么」，比如「用户点击了登录按钮」
  • Reducer/Mutation：根据Action更新Store里的数据
  • View：根据Store里的数据渲染页面

看个Redux的例子：

// Redux 状态管理示例
// 1. 定义 Action
const LOGIN = 'LOGIN';

// 2. 定义 Reducer
function userReducer(state = { isLogin: false }, action) {
  switch (action.type) {
    case LOGIN:
      return { ...state, isLogin: true, user: action.payload };
    default:
      return state;
  }
}

// 3. 创建 Store
const store = createStore(userReducer);

// 4. 派发 Action
store.dispatch({
  type: LOGIN,
  payload: { name: '张三', role: 'admin' }
});

Vuex的写法也差不多，只是把Reducer换成了Mutation。我个人习惯用Redux，因为它的中间件机制更灵活。但Vuex对新手更友好。

我曾经踩过的坑：把所有数据都塞进Store。结果Store变得巨大无比，每次改数据都要排查半天。后来学乖了——只放「跨组件共享」的数据。组件自己的临时状态，用useState或ref就够了。

1.4 虚拟DOM——性能的秘密武器

虚拟DOM是什么？说白了，就是一个轻量级的JavaScript对象，用来描述真实DOM的样子。

为什么需要它？因为操作真实DOM很慢。每次修改页面，浏览器都要重新计算布局、重绘。如果频繁操作，页面会卡顿。

虚拟DOM的思路是：先在内存里用JS对象模拟DOM结构。数据变了，先对比新旧两个虚拟DOM的差异（这叫Diff算法）。然后只把真正变化的部分更新到真实DOM上。

看个直观的例子：

// 虚拟DOM（JS对象）
const vNode = {
  type: 'div',
  props: { className: 'container' },
  children: [
    {
      type: 'h1',
      props: {},
      children: 'Hello World'
    }
  ]
};

// 对应的真实DOM
// <div class="container">
//   <h1>Hello World</h1>
// </div>

你想想看，如果只改h1里的文字，虚拟DOM只需要对比出「文本变了」，然后只更新那个文本节点。而不是重新渲染整个div。

React和Vue都用虚拟DOM，但实现细节不同。React的Diff算法更激进，Vue的优化更精细。不过对产品经理来说，知道「虚拟DOM能提升性能」就够了。

一句话总结：虚拟DOM就是「用计算换渲染」。多花点CPU算差异，少让浏览器去操作真实DOM。在复杂页面上，这个交换非常划算。

1.5 给产品经理的选型建议

最后，我结合多年经验，给几个实用建议：

  1. 别盲目追新——框架只是工具，业务才是核心。Vue 2够用就别非要升Vue 3。
  2. 看团队技术栈——团队擅长什么就用什么。强行换框架，学习成本很高。
  3. 考虑生态——React的第三方库最多，Vue的中文文档最好，Angular的企业级方案最全。
  4. 关注长期维护——选社区活跃、更新稳定的框架。别用那种「作者已跑路」的库。

我的习惯：做产品原型时，我会问技术负责人：「这个项目用React还是Vue？为什么？」然后根据他的回答，判断他对技术选型的思考深度。一个好的技术负责人，能说出三个以上的理由。

好了，这一章就到这里。下一章我们聊聊「前后端分离与API设计」，这是产品经理理解技术架构的关键一步。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →