// 警告：这是反面教材

function addMessage(message) {

// 1. 手动创建 DOM

const div = document.createElement('div');

div.className = 'message';

div.innerHTML = `${message.user}: ${message.text}`;

document.getElementById('message-list').appendChild(div);

// 2. 手动更新计数

const count = document.getElementById('unread-count');

count.textContent = parseInt(count.textContent) + 1;

// 3. 手动处理滚动

const list = document.getElementById('message-list');

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 50) {

list.scrollTop = list.scrollHeight;

}

// 4. 手动更新标题

document.title = `(${count.textContent}) 新消息`;

}问题来了：数据变了，你要手动去操作 DOM 的每一个地方。随着功能增加，这些「手动同步」的代码会越来越多，越来越乱，越来越容易出 Bug。

🤔 思考一下：如果消息被删除了呢？如果要修改消息呢？每个操作都要写一套 DOM 操作代码...

React 的核心思想：UI = f(state)React 的解决方案非常优雅——你只需要描述「数据是什么样的，UI 就应该是什么样的」，React 帮你搞定 DOM 操作。

// React 的方式：声明式

function ChatApp() {

const [messages, setMessages] = useState([]);

const [unreadCount, setUnreadCount] = useState(0);

return (

);

}看到区别了吗？

命令式（jQuery/原生）：告诉浏览器「第一步做什么，第二步做什么」声明式（React）：告诉 React「UI 应该长什么样」，React 自动算出怎么更新 DOM这就像点餐：

命令式 = 你告诉厨师「先切菜，再热油，然后炒...」声明式 = 你说「我要一盘宫保鸡丁」React 的三大核心概念1. 组件化（Component）React 把 UI 拆成独立、可复用的组件，每个组件管好自己的事：

App

├── Header → 负责导航

├── ChatList → 负责聊天列表

│ ├── ChatItem → 单个聊天项

│ └── ChatItem

├── MessagePanel → 负责消息面板

│ ├── Message → 单条消息

│ └── InputBox → 输入框

└── Footer → 负责底栏💡 实战经验：好的组件划分是 React 开发的核心技能。一个经验法则是——如果一段 UI 逻辑会被复用，或者它足够复杂需要独立维护，就把它抽成组件。

2. 单向数据流（One-way Data Flow）数据只能从父组件流向子组件（通过 Props），子组件不能直接修改父组件的数据。

[App: state]

↓ props

[ChatList]

↓ props

[ChatItem]这看起来像是「限制」，但实际上是一种保护。当你的应用出了 Bug，你可以沿着数据流追溯，很容易定位问题。

⚠️ 教训：我曾经在一个项目中让子组件直接修改父组件的状态（通过 ref 等 hack 方式），结果调试时完全不知道数据是谁改的，排查了整整两天。遵守单向数据流，是你未来少加班的保证。

3. 虚拟 DOM（Virtual DOM）React 不直接操作真实 DOM，而是：

在内存中维护一个「虚拟 DOM」（就是普通的 JS 对象）当数据变化时，生成新的虚拟 DOM对比新旧虚拟 DOM，找出差异（Diff）只更新真正变化的那部分真实 DOM状态变化 → 新虚拟DOM → Diff算法 → 最小化DOM操作🔬 原理提示：虚拟 DOM 并不是「比真实 DOM 快」，而是提供了一个合理的性能基线。它帮你避免了不必要的 DOM 操作，同时让开发者可以用声明式的方式写代码。我们会在 中深入讲解。

React vs Vue vs Angular特性ReactVueAngular定位UI 库渐进式框架全功能框架学习曲线中等较低较高模板语法JSX（JS 中写 HTML）模板（HTML 中写指令）模板 + 装饰器状态管理自选（Context/Redux/Zustand）Pinia（官方）RxJS + Service生态最大，选择最多生态完善自成体系适用场景大型应用、需要灵活性中小型应用、快速上手企业级大型应用💡 选型建议（个人经验）：

团队有 React 经验 → React需要快速交付 → Vue超大型企业项目且团队人多 → Angular不确定 → 学 React，因为它的思想最通用React 19 有什么新东西？React 19 是一个重要的版本更新,带来了很多令人兴奋的新特性：

Actions：简化异步操作和表单处理use() 函数：在组件中直接读取 Promise 和 ContextuseOptimistic：内置乐观更新支持useActionState：替代旧的表单状态管理方式Server Components：服务端组件（RSC）正式稳定文档元数据支持：组件内直接写