目录
一、学习目标
二、学习内容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 |
|---|---|---|
| 更新机制 | 深度对比（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 |
|---|---|---|
| 逻辑复用 | 自定义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 | |
|---|---|---|---|
| 1.组件化设计 | 都是组件构成、可复用、数据驱动UI（view）、并且都有生命周期方法/钩子 | 组件的定义：函数组件、类组件；JSX语法； 命名：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母 | 组件的定义：一个单文件（.vue）； 三个部分混在一起； 命名：不强制要求 |
| 2.单向数据流 | 都遵循 | 强调数据状态的可追溯、更严格 | 强调响应式；双向绑定 |
| 3.声明式 UI | 都遵循 | ||
| 4.虚拟 DOM | 都有 | 更新机制、重新生成、批量更新、更新方式、没有响应式 | 更新机制、自动生成、按需更新、有响应式和依赖追踪 |
| 5.Hooks | 都有，但是表现形式不一致 | 生命周期是useEffect实现的，需要多个Hooks配合使用，状态管理需要引入Redux等 | 生命周期有，易于处理状态关联的复杂场景，因为有响应式 |
| 6.JSX | 有，特定的规则 | 没有，只是有模板语言 | |
| 7.React Native | 跨平台、性能接近原生 | 无 |
对上面提到的几点特效进行总结，以下
四、总结
以上，暂时是这些，未完~学习过程中会持续更新！
