对比：React 还是 Vue
自己之前的开发栈一直是 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>
💛ྀི React：当数据变化时，UI随之更新，使用 “函数” 承载所有的功能；对于 React 来说函数组件本质上就是 js 的普通函数，抹平了 HTML 与 JavaScript 的割裂感，让使用更加专注 JavaScript 逻辑，无需额外心智负担。
export default () => {
const [items, setItems] = useState([{text: ''}]);
return (
<>
items.map(item => <div>{item.text}</div>)
</>
)
}
React 采用 hooks （如上述 useState）为组件提供状态，状态写在函数中，既不破坏纯函数的特性，又能在状态变更时使函数组件以最新的状态重新执行，更新DOM。
useState Hook 提供了这两个功能：
- State 变量 用于保存渲染间的数据。
- State setter 函数 更新变量并触发 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 采用函数式编程，函数式编程更加强调 程序执行的结果 而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。