对比：React 还是 Vue

时间：2024-04-05 12:38:52

自己之前的开发栈一直是 Vue，对 Vue 的设计理念及底层实现原理算是颇有了解；随着公司技术迭代，近半年来开始接触&使用 React。

前面写了几篇关于 React 的文章，但大部分都是知识点以及开发过程问题的沉淀总结。

这篇文章想尝试聊一下，从个人使用角度，???? React 和 Vue 的区别，到底“孰优孰劣”？

说明：这里 React 以 V16.8.0 版本为基准（ 正式引入 Hooks）

说在前面

随着 Vue、React 的演进，其各自框架的基本形态和功能已经很完备，最根本差异点逐渐演变成了框架开发者各自的 理念差异 ，不同的理念让框架有了各自的 设计模式和最佳实践 。然而，对于使用者来说，搞懂其设计模式、沉淀其最佳实践、了解其基本原理，是掌握一门框架的捷径，也是衡量对其熟悉程度的标尺。

数据驱动

????ྀི Vue：设计了新的类似 HTML 模板语法，通过选项属性（vue3组合式）为开发者提供编写逻辑和 state 的地方，再通过 viewModel，当监听到 state 变化时再去更新 view，通过众多的 “语法糖” 让使用变得的更加容易。

<template>
	<div v-for="item in items">{{ item.text }}</div>
</template>
<script>
	export default () {
    return {
      data () {
        items: [{text: ''}]
      }
    }
  }
</script>
绑定
渲染
data数据
template代码段
HTML

????ྀི React：当数据变化时，UI随之更新，使用 “函数” 承载所有的功能；对于 React 来说函数组件本质上就是 js 的普通函数，抹平了 HTML 与 JavaScript 的割裂感，让使用更加专注 JavaScript 逻辑，无需额外心智负担。

export default () => {
  const [items, setItems] = useState([{text: ''}]);
  return (
  	<>
    	items.map(item => <div>{item.text}</div>)
    </>
  )
}
渲染
state数据
jsx
HTML

React 采用 hooks （如上述 useState）为组件提供状态，状态写在函数中，既不破坏纯函数的特性，又能在状态变更时使函数组件以最新的状态重新执行，更新DOM。

useState Hook 提供了这两个功能：

  1. State 变量 用于保存渲染间的数据。

  2. State setter 函数 更新变量并触发 React 再次渲染组件。

可参考：开篇：通过 state 阐述 React 渲染

✈️ vue 中提供了 v-for 语法糖，提供循环能力；React 则回归开发语言本身，直接使用使用 JavaScript 原生 map 实现。

生命周期

????ྀི Vue：有明确的生命周期，针对组件的不同阶段去更新视图

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

????ྀི React：摒弃了生命周期概念，只在特定的时机会触发整个函数组件的重新执行，从而生成最新的视图，不需要做不同的逻辑。这一切，通过相关 Hooks 即可实现：

  • useState 保存渲染间的数据，其发生改变会触发重新渲染，可查看：总结：React 中的 state 状态。
  • React 设计了 useEffect 用来处理与渲染无关的副作用代码，可查看：「Effect：由渲染本身引起的副作用」。
  • 同样的，React 中设计了 useRef 来存储与渲染无关的数据，其可以贯穿重复的函数执行，变更后不需要触发函数重新渲染，并且不需要在意此时函数的渲染过程，可查看：脱围：使用 ref 保存值及操作DOM。

正常的开发过程中 useState、 useEffect、 useRef 几乎可以解决所有问题，其他的 Hooks 多数为了优化而设计（后续单独文章讲述）。

逻辑复用

可以通过封装 JavaScript 函数来处理一些公共逻辑，但对于封装一个 带响应式 的方法异常困难。

????ྀི Vue：采用 Mixin 方式；使用过程比较爽，但是后续维护异常困难，“搞不清不敢动”。甚至不少团队规范中要求宁肯copy，也不要用 Mixin。

Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    this.greet(); // 调用mixin中的方法
  }
});

????ྀི React：采用自定义 Hooks。相同业务逻辑拆分的更清晰，降低代码的冗余。

自定义 Hook 共享的只是状态逻辑而不是状态本身。对 Hook 的每个调用完全独立于对同一个 Hook 的其他调用。

每当组件重新渲染，自定义 Hook 中的代码就会重新运行。组件和自定义 Hook 都 需要是纯函数。

// useWindowSize.js 
export default function useWindowSize (){
	const [size, setSize] = useState(getSize());
  useEffect(() => {
  	const handler = () => {
      setSize(window.innerWidth)
    };
    window.addEventListener('resize', handler);
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);

  return [size];
};

// jsx中使用
export default function（）{
  const [size] = useWindowSize();
}

总结

1️⃣ Vue 可能不断推出新功能，让开发变的更舒适；React 没有模板、没有生命周期、没有指令、没有各种各样的语法糖、没有复杂的执行过程，是一个只有函数的世界！

2️⃣ Vue 更贴近传统前端开发方式，更符合人的直觉，更易上手更简单；React 让函数变得更加复杂，使用者有更大的控制权，更加灵活，从而优雅。

3️⃣ React 采用函数式编程，函数式编程更加强调 程序执行的结果 而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

相关文章