目录

一、学习目标

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

1.组件化设计

2.单向数据流

3.声明式 UI

4.虚拟 DOM

5.Hooks

6.JSX 

7.React Native

三、React与vue的比较总结

四、总结

---

一、学习目标

时间：两周

内容：

• React的特点
• React的入门
• React的功能、API
• 深入了解 Hook
• 学习路由和状态管理
• React的原理等等

---

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

这里主要是记录React的特点，中间会查询很多内容，在此记录总结一下,其中会涉及很多与vue的相同点和不同点比较，很多都是个人理解总结，所以不具备广泛的定义（不要当成文档来学习哦！记岔劈了我不负责）。

1.组件化设计

React 采用组件化的设计理念，UI 被拆分为独立的、可复用的组件。每个组件负责自己的一部分 UI，并且可以互相组合形成复杂的界面。

文档里这样描述组件：

React有两种类型的组件：函数组件、类组件，使用JSX语法能将HTML、JavaScript混在一起。

相比之下，Vue 的组件化思想体现在将组件作为界面构建的基本单元，比如常见的单页面（.vue文件）就是一个组件，里面有三个部分，模板（HTML）、脚本（JavaScript）、样式（CSS）等部分。

因为都是组件化设计的思想，就都有一个特点：可复用、数据驱动UI（view）、并且都有生命周期方法/钩子。

不同点：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。而vue就没有这个限制，但也推荐这种写法。

2.单向数据流

Vue 和 React都使用单向数据流（One-Way Data Binding），即数据从父组件传递到子组件(vue的props)，而子组件只能通过回调函数(比如vue的emit通)知父组件数据的变化。

这种单向流动有助于数据的可预测性，使应用的数据流向更清晰，尤其在大型应用中便于维护和调试，也更可追溯，更可控，状态变更的源头也更唯一。

但是vue有双向绑定，在表单的输入时通过v-model可以自动同步数据和状态，是一种单向数据流的补充，而react就是手动设置来控制表单数据的双向绑定。

 确实，react的单向数据流需要手动控制可以避免一些隐式转换的变化，还有vue的响应式的一些坑。

3.声明式 UI

这个的意思是：开发者只需定义组件的最终状态，框架会根据数据的变化和状态的更新，自动处理 DOM 操作来实现这些效果。

也可以理解为vue的MVVM设计架构里的VM这种思路（我vue学的多，就用这个来指代了），当数据发生变化时，框架会自动计算并更新所需的 DOM 节点，而开发者不需要直接访问或操作 DOM 元素。

除了声明式UI还有一种叫做传统的命令式UI，就需要手动操作DOM，比如使用 jQuery 手动更新 DOM 的方式。

所以，这两个框架在这种情况下，都会监听界面里的数据的变化，并自动更新视图，也就是开发者只需要描述 UI 应该如何显示，而不必手动操作 DOM。

优势嘛，也就是：减少代码复杂度、提高代码可维护性等等，也更简单了吧。

4.虚拟 DOM

虚拟dom这个概念，这个东西的产生是为了提高性能和效率，避免频繁地操作真实DOM，提到这个就会提到一个不可绕开的东西——diff算法。

这里主要对两个框架生成和更新虚拟dom的过程进行对比：

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		跨平台、性能接近原生	无

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

四、总结

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