React 的学习记录一：与 Vue 的相同点和区别-EW帮帮网

React 和 Vue 虚拟 DOM 的区别
特性	React	Vue
更新机制	深度对比（diffing algorithm——最小化差异算法，会尽可能多地对比所有的虚拟 DOM 节点），逐层比较	基于响应式系统和依赖追踪，异步更新队列（通过 `nextTick` 来更新），并且按需更新，diff才用双端比较策略
虚拟 DOM 生成	每次重新生成新的虚拟 DOM	基于响应式数据自动生成和更新虚拟 DOM
性能优化	应用批量更新，即多个状态更新操作会合并到一次更新中，减少重复渲染	精细化的响应式数据跟踪，减少不必要的组件更新
组件更新	组件的更新需要通过 `shouldComponentUpdate` 或 `React.memo` 优化	通过依赖追踪和异步更新，自动优化渲染
虚拟 DOM 更新的方式	每次对比新旧虚拟 DOM，寻找最小差异	只更新受影响的部分，减少不必要的 DOM 操作
响应式系统	无内建响应式系统，需要借助 `useState` 等 Hook 来管理状态	内建响应式系统，自动跟踪依赖并更新

当然这里提及一个vue2，vue3的diff算法的区别，因为我是vue较熟练，所以对这个进行了总结：

Vue 2：

基于双端比较策略。

使用完整的虚拟 DOM 树和 key 来标记节点。

Vue 3：

对静态节点进行优化：通过静态节点标记，跳过不需要 Diff 的部分，提高性能。

更加高效的 PatchFlag 机制：用于标记节点变化类型，减少不必要的对比。

支持 Fragment 和 Teleport 等特性。

本来想写一篇diff的相关知识，但是看了几篇发现有很不错的，就不费力去写了，推荐这篇：

vue3手写diff算法（图解+例子+详细注释）

写的很棒，还解释了v-for的时候key的原理，在源码中一闪而过，但是我并没有仔细去了解的。

5.Hooks

Hooks就是钩子，可以理解为特定时机会触发的东西，vue3因为组合式API的出现，就提出新的逻辑复用的方案——hooks（也被称之为vue hooks，与react做区分），都是为了更好地组织逻辑、复用功能、提升代码可维护性而设计的。当然两者的实现方式和使用场景有一定区别。

因为这个很重要，所以对两个的代码进行比较：

React Hooks:

import { useState, useEffect } from "react";

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    console.log(`Count updated: ${count}`);
  }, [count]);

  return { count, increase: () => setCount(count + 1) };
}

// 使用
function Counter() {
  const { count, increase } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
    </div>
  );
}

Vue Composition API:

import { ref, watch } from "vue";

function useCounter(initialValue) {
  const count = ref(initialValue);

  watch(count, (newCount) => {
    console.log(`Count updated: ${newCount}`);
  });

  const increase = () => {
    count.value++;
  };

  return { count, increase };
}

// 使用
setup() {
  const { count, increase } = useCounter(0);
  return { count, increase };
}

关于两者的对比：

**React 和 Vue 关于Hook 的区别**
特性	React	Vue
逻辑复用	自定义Hooks，返回状态和方法，更加轻量，适合纯逻辑处理，通过函数封装	独立函数或者模块，内置响应式和依赖追踪，适合复杂业务的逻辑独立
生命周期	useEffect模拟组件的生命周期	onMounted,onUnmounted等都有
状态管理	useState:不可变值的状态更新	ref，reative，基于proxy的响应式系统
计算属性	无，手动实现	computed
副作用处理	使用useEffect，依赖数组控制执行	watch、watchEffect
复杂场景	需要多个Hooks配合使用，状态管理需要引入Redux等	易于处理状态关联的复杂场景，因为有响应式

总结:

React Hooks 偏向于函数式编程，更加轻量，但需要开发者对依赖和状态管理有良好掌控能力。

Vue Composition API 内置响应式系统，逻辑清晰且高度灵活，适合复杂项目

6.JSX

JSX 是 JavaScript XML 的缩写，它是一种语法糖，可以在 JavaScript 中直接编写类似 HTML 的代码，浏览器无法直接运行 JSX，必须通过 Babel 等工具编译成标准的 JavaScript。它是 React 社区设计和推广的，React 对 JSX 提供了强大的支持。

React的官方教程里就有对JSX的规则介绍:

JSX 规则

JSX有一些特点，比如被大家熟知的：多个 JSX 标签需要被一个父元素包裹、使用驼峰式命名法等等。

Vue 默认使用模板语法，但支持 JSX，需额外安装 Babel 插件。

7.React Native

这里我了解太少，暂时只是将概念特性整理下来了：

跨平台

使用一套代码，同时运行在 iOS 和 Android 上。

支持大部分原生组件和 API。

性能接近原生

使用 JavaScript 与设备原生模块交互，通过 Native Bridge 实现性能接近原生的应用。

热更新与开发效率高

支持 Hot Reloading 和 Fast Refresh，在不重启应用的情况下，立即查看代码更改的效果。

可通过 OTA（Over-The-Air）技术实现热更新，无需重新发布到应用商店。

社区支持强

React Native 社区非常活跃，提供了大量的第三方库，极大地减少了开发时间。

组件化开发

RN 的 UI 是基于组件的，这与 React 的开发理念一致，能够轻松实现代码复用。

三、React与vue的比较总结

对上面提到的几点特效进行总结，以下：

React与Vue的特点比较
	相同点	不同点：React	不同点：Vue
1.组件化设计	都是组件构成、可复用、数据驱动UI（view）、并且都有生命周期方法/钩子	组件的定义：函数组件、类组件；JSX语法；命名：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母	组件的定义：一个单文件（.vue）；三个部分混在一起；命名：不强制要求
2.单向数据流	都遵循	强调数据状态的可追溯、更严格	强调响应式；双向绑定
3.声明式 UI	都遵循
4.虚拟 DOM	都有	更新机制、重新生成、批量更新、更新方式、没有响应式	更新机制、自动生成、按需更新、有响应式和依赖追踪
5.Hooks	都有，但是表现形式不一致	生命周期是useEffect实现的，需要多个Hooks配合使用，状态管理需要引入Redux等	生命周期有，易于处理状态关联的复杂场景，因为有响应式
6.JSX		有，特定的规则	没有，只是有模板语言
7.React Native		跨平台、性能接近原生	无

对上面提到的几点特效进行总结，以下

四、总结

以上，暂时是这些，未完~学习过程中会持续更新！

React 的学习记录一：与 Vue 的相同点和区别

一、学习目标

二、学习内容1️⃣——React的特点

1.组件化设计

2.单向数据流

3.声明式 UI

4.虚拟 DOM

5.Hooks

6.JSX

7.React Native

三、React与vue的比较总结

四、总结

网站公告

今日签到

热门文章

最新发布