react.js vue.js 前端 react与vue区别 函数式编程 对比：React 还是 Vue

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

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

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

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

说在前面

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

数据驱动

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

#mermaid-svg-s7WJ5epaUpLuXcJQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .error-icon{fill:#552222;}#mermaid-svg-s7WJ5epaUpLuXcJQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-s7WJ5epaUpLuXcJQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .marker.cross{stroke:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster-label text{fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster-label span{color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .label text,#mermaid-svg-s7WJ5epaUpLuXcJQ span{fill:#333;color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node rect,#mermaid-svg-s7WJ5epaUpLuXcJQ .node circle,#mermaid-svg-s7WJ5epaUpLuXcJQ .node ellipse,#mermaid-svg-s7WJ5epaUpLuXcJQ .node polygon,#mermaid-svg-s7WJ5epaUpLuXcJQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node .label{text-align:center;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node.clickable{cursor:pointer;}#mermaid-svg-s7WJ5epaUpLuXcJQ .arrowheadPath{fill:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster text{fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster span{color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-s7WJ5epaUpLuXcJQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

绑定

渲染

data数据

template代码段

HTML

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

export default () => {

const [items, setItems] = useState([{text: ''}]);

return (

<>

items.map(item =>

)

}

#mermaid-svg-vljV7w8hI5sccWJA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .error-icon{fill:#552222;}#mermaid-svg-vljV7w8hI5sccWJA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vljV7w8hI5sccWJA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vljV7w8hI5sccWJA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vljV7w8hI5sccWJA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vljV7w8hI5sccWJA .marker.cross{stroke:#333333;}#mermaid-svg-vljV7w8hI5sccWJA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vljV7w8hI5sccWJA .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster-label text{fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster-label span{color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .label text,#mermaid-svg-vljV7w8hI5sccWJA span{fill:#333;color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .node rect,#mermaid-svg-vljV7w8hI5sccWJA .node circle,#mermaid-svg-vljV7w8hI5sccWJA .node ellipse,#mermaid-svg-vljV7w8hI5sccWJA .node polygon,#mermaid-svg-vljV7w8hI5sccWJA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vljV7w8hI5sccWJA .node .label{text-align:center;}#mermaid-svg-vljV7w8hI5sccWJA .node.clickable{cursor:pointer;}#mermaid-svg-vljV7w8hI5sccWJA .arrowheadPath{fill:#333333;}#mermaid-svg-vljV7w8hI5sccWJA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-vljV7w8hI5sccWJA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-vljV7w8hI5sccWJA .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-vljV7w8hI5sccWJA .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-vljV7w8hI5sccWJA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-vljV7w8hI5sccWJA .cluster text{fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster span{color:#333;}#mermaid-svg-vljV7w8hI5sccWJA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-vljV7w8hI5sccWJA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

渲染

state数据

jsx

HTML

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

useState Hook 提供了这两个功能：

State 变量 用于保存渲染间的数据。 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 采用函数式编程，函数式编程更加强调 程序执行的结果 而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

参考链接

 您阅读本篇文章共花了：