react和vue对比

vue3和react hook有什么区别

技术生态圈不一样：

（可能不是固定，在发展阶段会更改技术栈）

• vue3：vue + pinia + vite
• react：react + webpack + redux ｜ dva

声明式响应状态

• vue：vue2时用的是data，vue3中用的ref和reactive
• react： 类class继承时用是setState，hook时用的useState钩子形式

生命周期对比

• vue2

vue2:
	beforeCreate 创建前
	created 创建后
	beforeMount 挂载前
	mount 挂载后
	beforeUpdate 更新前
	updated 更新后
	beforeDestroy 销毁前
	destroy 销毁后

• vue3

	setup 开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
	onBeforeMount 挂载前
	onMounted 挂载后
	onBeforeUpdate 更新前
	onUpdated 更新后
	onBeforeUnmount 卸载前
	onUnmounted 卸载后
	onErrorCaptured  捕获后代组件传递错误时调用
	onRenderTracked （仅在开发模式下调用）组件渲染过程中追踪到响应式依赖时调用
	onRenderTriggered  当响应式依赖的变更触发了组件渲染时调用。
	onActivated 若组件实例是<KeepAlive>缓存树的一部分，当组件被插入到DOM中时调用
	onDeactivated 若组件实例是<KeepAlive>缓存树的一部分，当组件从DOM树中被移除时调用
	onServerPrefetch 在组件实例在服务器上被渲染之前调用

• react class

constructor 在react组件挂载之前，会调用它的构造函数
getDerivedStateFormProps 在调用render方法之前调用，并且在初始化挂载及后续更新时都会调用
render class组件中唯一必须实现的方法
componentDidMount 组件挂载后（插入DOM树中）立即调用
shouldComponentUpdate 当state或props发生变化时，shouldComponentUpdate会在渲染执行之前调用。
getSnapshotBeforeUpdate 在最近一次渲染输出（提交到DOM节点）之前调用
componentDidUpdate 在更新后会被立即调用
componentWillUnmount 在组件卸载或销毁之前直接调用

• react hooks：

useEffet(() => {}, [])
例：
// componentDidMount与componentDidUpdate类似
useEffect(()=>{  
    return function cleanup() {
        // 需要在 componentWillUnmount 执行的内容
    }
    
}, [])

注：其实vue3改版后的生命周期依然有点繁重，而react hook的生命周期更轻量

模版语法不同

vue中，会有什么v-关键字使用：如v-if，v-for，v-model等,而vue的
事件都是以@或v-on:
vue2中.vue文件的顺序：template -> script -> style，并且template模版下不能有多个子元素
vue3中.vue文件顺序：script -> template -> style ，并且template模板下可以有多个子元素

而react没有向v-if这类的指令，而类组件中render()，而在函数组件中可以直接return，绑定click事件时：onClick={}

对于vue我目前还没细了解源码对虚拟dom的处理方式，但是看vue渲染机制我的理解是通过上次创建的vnode做缓存处理，官方描述是有两个虚拟dom，渲染器会有比较地遍历它们，找出它们的区别，并应用这其中的变化到真实dom上。
参考：https://juejin.cn/post/6997579802215448606

但是在react中，react15以前，用的是将更新的子组件进行递归，更新一开始就无法停止，不是造成卡顿就是页面空白等bug，所以16改成类fiber等一种形式，是双缓存的形式。

引入公共组件不同

vue可以定义全局的公共组件，然后只进行一次引入，全局使用
而react需要不通文件中一次次性的引入

计算不同

• vue2

computed: {
    事件名(){},
    ...
}

• vue3

import { reactive, toRefs ,computed} from "vue";
// 第一种写法, 直接用
const testCompte = computed(() => {})

// 第二种写法，写在reactive中
let shopNum = reactive({
      num: computed(() => {
        let nums = 0;
        obj.value.forEach((item) => {
          if (item.checked) {
            nums += item.num;
          }
        });
        return nums;
    }),
});

vue2和vue3的计算属性对比，vue2是一种js对象形式的，而vue3像一种钩子的形式，来处理，直白点就是参数传入
详细的计算属性对比参考

• react：

	useMemo(() => {} , [])

vue和react对比参考

灵活性、开发速度、性能和其他（如何选择框架）

react主要弱点是它的文档，库更新太频繁，文档无法跟上，对于开发人员来说不方便。

• 灵活性：
  • react提供很大的灵活性，可以根据特定需求进行定制，它支持各种库和工具，尽管这些扩展来自于第三方。
  • vue非常灵活，但与react不同的是，它对各种库有强大的本机支持
• 工具开发：
  • react hooks是的设置和初学者上手较为友好，有许多第三方插件可用，但是一些广泛使用的扩展不是官方的。
  • vue也是用户和初学者友好，覆盖了Native模块的大多数开发需求，但是它缺乏广泛的第三方插件，可能不适合良好的维护。
• 工具：
  • react为组件提供了强大的调试工具，但它的CLI在性能上有限制，
  • vue提供了强大的调试工具，并利用该套件进行快速开发，确保速度和效率。
• 性能：
  • react提供可靠的性能并支持服务器站点渲染，并提供了全面的文档和很棒的社区，但它不像vue那么快。
  • vue 提供了非常快的性能，还支持服务器的渲染文档，vue的社区较小，但是拥有出色的且清晰简洁的文档。

注：目前写的对比还不够，会根据后期项目中再继续做总结

vue3和react为什么都采用hook的形式

PS：起这个标题是因为，我在面试中，有面试官问过我这个问题，我用vue2做项目是两年多前的事情了，刚学vue3，对于一些地方了解还是比较浅显。
但是还算是最了解react吧，当初从react class 向 react hooks转型的时候，就是因为我看到来react官网上的一个将class编程和hooks编程的相同功能代码做了对比，而hooks的代码量显然少了将近一半儿，可读性强，维护友好，重用性高。
我认为 vue3 更准确的来说，不是严格意义上的hook形式，而是Composition API，除一些生态圈的变化外，vue3与react hooks相比来说，react hooks几乎所有的方法都是基于钩子进行开发的。
但无论是vue还是react，改用hooks形式开发，都是为了解决bug

vue3和react的好处在于：

• 更容易重用状态逻辑并分离关注点
• 没有什么“this”绑定问题
• 优化：hook可能会减少包的大小
• 利于未来发展

等等，详细了解可点击跳转

做的笔记还有很多地方没有去进行过多的论证，如有问题，还请指出。