跳到主要内容

知识储备与技术选型、积累技术广度

React 和 Vue 的区别、 React 和 Vue 如何技术选型。分别更适合和擅长哪些业务？​

React 和 Vue 的区别​

  • 相同点

    • 都支持组件化
    • 都是数据驱动视图
    • 都是 vdom 操作 DOM

  • 不同点

    • React 用 JSX(JS)，Vue 使用模板(html)

      JSX + inline style，也就是把 HTML 和 CSS 全都整进 JavaScript 了

    • React 函数式编程，Vue 声明式编程
    • React 更多的是自力更生，Vue 把想要的都给你
      • 例如：vue 双向绑定和 react 数据绑定

        双向绑定是对表单来说的，表单的双向绑定，说到底不过是 value 的单向绑定 + onChange 事件侦听的一个语法糖。

    • Vue 的默认 API 是以简单易上手为目标

    React 的社区/组件生态比 Vue 大很多

vue: Runtime、Immutable、Template、抽象

react: Compiler、Mutable、JSX、JS

参考:

React 与 Vue 框架的设计思路

React 和 Vue 如何技术选型。分别更适合和擅长哪些业务？​

  1. 应用场景，业务考虑。有人认为，vue 不适合大型项目

在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。

大列表渲染，大量数据加载，不做进一步优化的话Vue明显比React慢

  1. 从技术开发团队熟悉程度和招人成本考虑。熟悉哪个框架，哪个框架的人容易招。

  2. 从社区大小和活跃度考虑。

参考：

开发框架​

  • 服务端渲染 SSR
    • Next.JS: 基于 React
    • Nuxt.JS: 基于 Vue
  • nodejs 后端框架
    • Express
    • Nest.js
    • Koa.js: 基于 Express, 洋葱模型
    • Strapi: 基于 Express 内容管理平台（CMS），支持自动生成 CURD API, 内置用户认证和权限管理
  • Umi.JS
  • VBen

react 数据管理库​

  • Redux

  • React Context API

  • redux-saga

  • dva

    • 描述：基于 redux 和 redux-saga
    • 特点：封装了常用的状态管理模式
    • 适用场景：Ant Design 系列生态项目，复杂异步逻辑

  • immutable.js

    • 描述：提供不可变值的数据结构，如 Map List Set，保证用户修改 state 的时候不会误修改值

    • 特点

      • 状态比较效率更高：只需要比较引用，而非完整的数据内容（如 Map 是否相同，需逐个比较 key value）

      • 深层状态变更：当状态结构非常深时，普通的 JavaScript 深层对象更新会变得复杂和冗长

        // 深层更新示例
        let state = Map({
          user: Map({
            profile: Map({
              name: 'John',
            }),
          }),
        });

        // 使用 setIn 更新深层属性
        let newState = state.setIn(['user', 'profile', 'name'], 'Doe');
        console.log(state.getIn(['user', 'profile', 'name'])); // 输出 'John'
        console.log(newState.getIn(['user', 'profile', 'name'])); // 输出 'Doe'

  • 适用场景：结构 redux 等其他状态管理来使用

    // 原生 JS Map 可变
    let jsMap = new Map();
    jsMap.set('key', 'value');
    console.log(jsMap.get('key')); // 输出 'value'
    jsMap.set('key', 'new value');
    console.log(jsMap.get('key')); // 输出 'new value'

    // Immutable Map 不可变
    const { Map } = require('immutable');
    let immutableMap = Map({ key: 'value' });
    let newMap = immutableMap.set('key', 'new value');
    console.log(immutableMap.get('key')); // 输出 'value'，原 map 未被修改
    console.log(newMap.get('key'));       // 输出 'new value'，生成了一个新 map

  • MobX

    • 描述：观察者模式的状态管理库
    • 特点：observable 和 observer ，自动依赖追踪
    import { makeAutoObservable } from 'mobx';
    import { observer } from 'mobx-react-lite';
    ...
    coustructor() {
      makeAutoObservable(this)
    }
    ...

    const ComponentDemo = observer(() => (
        ...
    ))