第一章：React核心思想与设计哲学
1.1 组件化思维革命
React的核心创新在于将UI分解为独立、可复用的组件。每个组件都是状态机，包含：
输入属性（Props）：从父组件接收的不可变数据
内部状态（State）：组件自身管理的可变数据
渲染逻辑：根据props和state生成UI的描述
与传统DOM操作不同，React采用声明式编程模式。开发者只需声明"UI应该是什么样子"，而不需要逐步指示"如何更新UI"。当状态变化时，React自动计算最小更新集并高效执行DOM操作。
1.2 虚拟DOM工作原理
虚拟DOM是React性能的基石，其工作流程分为三步：
构建虚拟树：组件render方法返回轻量级JS对象（React元素）
差异比对（Diffing）：状态变化时创建新虚拟树，与旧树递归比较
协调（Reconciliation）：计算最小变更集，批量更新真实DOM
1.3 JSX的本质
JSX不是模板引擎，而是语法糖：
// JSX代码
const element = <h1 className="title">Hello</h1>;
// 编译后
const element = React.createElement(
'h1',
{ className: 'title' },
'Hello'
);
JSX让组件结构更直观，同时保留JavaScript的全部能力。Babel编译器在构建阶段将其转换为React.createElement调用。
第二章：组件体系深度解析
2.1 函数组件与类组件
React支持两种组件定义方式：
函数组件：纯函数接收props，返回JSX
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类组件：继承React.Component，拥有生命周期和state
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
现代React推荐使用函数组件+Hooks模式，但理解类组件对阅读遗留代码至关重要。
2.2 Props数据流
Props遵循单向数据流原则：
父组件通过属性传递数据：<Child color="blue" />
子组件通过props接收：props.color
Props只读：直接修改会触发错误
复杂数据传递可使用Context API，避免多层透传（Prop Drilling）：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Button() {
const theme = useContext(ThemeContext);
// 获取theme值
}
第三章：状态管理与生命周期
3.1 useState原理剖析
useState是React Hooks的核心API：
const [count, setCount] = useState(0);
useState在组件首次渲染时初始化状态
setCount触发重新渲染，但不会立即更新值
状态更新是异步批处理的，多次set调用可能合并
关键原理：React通过调用顺序追踪Hooks。必须在顶层调用Hooks，不能在条件或循环中使用。
3.2 组件生命周期
函数组件生命周期通过useEffect管理：
useEffect(() => {
// 相当于componentDidMount + componentDidUpdate
console.log('组件已挂载或更新');
return () => {
// 相当于componentWillUnmount
console.log('组件即将卸载');
};
}, [dependencies]); // 依赖项变化时触发
生命周期各阶段：
挂载阶段：组件首次插入DOM
更新阶段：props/state变化导致重新渲染
卸载阶段：组件从DOM移除
第四章：事件处理机制
4.1 合成事件系统
React事件是跨浏览器包装的合成事件：
统一事件接口：标准化事件对象属性
事件委托：大部分事件委托到document处理
自动清理：组件卸载时移除事件监听器
事件绑定：
<button onClick={(e) => handleClick(e)}>
Click
</button>
