1、React核心概念：JSX语法、虚拟DOM、组件化思想、声明式编程
好，咱们直接进入正题。React 这四个核心概念，说白了就是它的「灵魂四件套」。你把这四个东西吃透了，后面写组件、搭架构，基本就顺风顺水了。我当年刚接触 React 时，也是从这几个概念开始，一步步踩坑走过来的。
1.1 JSX 语法：在 JavaScript 里写 HTML
JSX 是什么？它是 JavaScript 的语法扩展。你可以在 JS 文件里直接写类似 HTML 的标签。我第一次看到这种写法时，心里想：「这玩意儿能跑？」
嗯，它确实能跑。React 团队把 JSX 编译成了 React.createElement() 调用。你写的是标签，底层跑的是函数。
核心要点：JSX 不是模板引擎，它是语法糖。
// 你写的 JSX
const element = <h1>Hello, React!</h1>;
// 编译后
const element = React.createElement('h1', null, 'Hello, React!');
我在项目中遇到过不少新手把 JSX 当成纯 HTML 来写，结果踩了坑。比如 class 要写成 className，for 要写成 htmlFor。为什么？因为 JSX 最终是 JS，而 class 和 for 在 JS 里是保留字。
避坑指南：JSX 中只能有一个根元素。如果你需要返回多个同级元素，用 <React.Fragment> 或者简写 <></> 包裹。
还有一点，JSX 里可以嵌入任何 JavaScript 表达式，用花括号 {} 包起来就行。你想想看，这比字符串拼接爽多了。
const name = '张三';
const element = <p>你好，{name}！</p>;
1.2 虚拟 DOM：性能的秘密武器
虚拟 DOM 是什么？它是一个轻量级的 JavaScript 对象，是真实 DOM 的「影子」。每次状态变化时，React 不会直接操作真实 DOM，而是先在虚拟 DOM 上做比较。
为什么会这样？因为操作真实 DOM 太慢了。你每改一次 DOM，浏览器就要重新计算布局、重绘页面。频繁操作的话，页面会卡成 PPT。
我记得有一次做后台管理系统，表格里要实时更新上千条数据。如果直接操作真实 DOM，页面直接卡死。用了虚拟 DOM 后，流畅得像丝滑巧克力。
个人经验：虚拟 DOM 的核心是「diff 算法」。它比较新旧两棵虚拟 DOM 树，找出最小差异，然后批量更新真实 DOM。这个过程叫「调和」（Reconciliation）。
简单来说，流程是这样的：
- 状态变化，生成新的虚拟 DOM 树
- 新旧虚拟 DOM 进行 diff 比较
- 计算出最小更新操作
- 批量更新真实 DOM
你可能会问：「每次都重新生成整棵树，不浪费吗？」嗯，这里要注意，虚拟 DOM 的 diff 算法是 O(n) 复杂度的，不是 O(n³)。React 做了很多优化，比如只比较同层节点、给列表元素加 key 值等。
1.3 组件化思想：搭积木式开发
组件化，说白了就是把页面拆成一个个独立、可复用的模块。每个组件只负责自己的那部分逻辑和视图。
我刚开始做前端时，页面代码全写在一个文件里，几千行，改一个地方要翻半天。后来用了组件化，每个功能块独立成组件，爽多了。
核心原则：单一职责。一个组件只做一件事，并且做好它。
组件化有几个好处：
- 复用性：写一次，到处用。比如按钮、输入框、弹窗
- 可维护性：每个组件独立，改一个不影响其他
- 可测试性：组件独立，单元测试好写
// 一个简单的组件
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
// 使用
<Button text="点击我" onClick={() => alert('你好')} />;
组件之间通过 props 传递数据，通过 state 管理内部状态。父组件给子组件传数据，子组件通过回调通知父组件。这种单向数据流，让数据变化可预测、可追踪。
避坑指南：我曾经在项目里把状态放在多个组件里，结果数据不同步，排查了半天。后来统一用状态管理工具（如 Redux、Zustand）解决了。记住：能放父组件的状态，不要放子组件。
1.4 声明式编程：告诉 React「做什么」，而不是「怎么做」
声明式编程是 React 的核心思想之一。你只需要描述「UI 应该是什么样子」，React 会帮你搞定「怎么去实现」。
对比一下命令式编程：
| 编程范式 | 特点 | 示例 |
|---|---|---|
| 命令式 | 告诉计算机每一步怎么做 | document.getElementById('app').innerText = 'Hello' |
| 声明式 | 告诉计算机想要什么结果 | <h1>Hello</h1> |
你想想看，命令式编程就像你给朋友指路：「先左转，走 100 米，再右转...」而声明式编程就像你说：「我要去天安门。」剩下的交给导航。
在 React 中，你只需要根据状态声明 UI：
function Greeting({ isLoggedIn }) {
// 声明式：根据 isLoggedIn 的值，直接返回对应的 UI
return isLoggedIn ? <h1>欢迎回来</h1> : <h1>请登录</h1>;
}
我个人习惯用声明式写 UI，因为它让代码更可读、更易维护。你不需要关心 DOM 操作、事件绑定这些细节，只需要关注「数据变了，UI 该怎么变」。
小技巧：写组件时，先想清楚「这个组件有哪些状态？每个状态对应什么 UI？」然后直接写出来。这就是声明式编程的思维。
好了，这四个核心概念就讲到这里。JSX 让你在 JS 里写 HTML，虚拟 DOM 提升性能，组件化让代码可复用，声明式编程让你关注结果而非过程。这四个东西，是 React 的基石，也是你后面学习路由、状态管理、Hooks 的基础。
下一章，我们聊聊 React 的组件生命周期和 Hooks。嗯，那才是真正好玩的地方。