React-核心特性全解析React 能够成为前端领域的霸主，不仅仅是因为它好用，更因为它带来了一场关于“视图即状态”的

React 能够成为前端领域的霸主，不仅仅是因为它好用，更因为它带来了一场关于“视图即状态”的思想变革。理解 React 的核心特点，是深入学习 Hook、Redux 等生态的基石。

一、 JSX 语法：超越模板的灵活表达

JSX（JavaScript XML）是 JavaScript 的语法扩展，它让 HTML 结构能够直接写在 JS 逻辑中。

代码优化：JSX 在编译阶段（由 Babel 完成）会被转换为 React.createElement。编译器会进行静态分析和代码优化，执行效率极高。
命名规范：
- HTML 标签：必须全小写字母（如 <div>）。
- 自定义组件：必须首字母大写（如 <MyComponent />）。
- 驼峰命名：事件名（onClick）与样式属性名（backgroundImage）均采用驼峰法。
属性差异：由于 class 是 JS 关键字，需改写为 className。

单一顶层标签：render 函数返回的 JSX 必须被一个父标签包裹（如使用 <Fragment> 或简写 <>...</>），否则 Babel 无法将其转换为单一的 JS 对象。
大括号表达式：在 {} 中可以书写任何有效的 JS 变量、函数调用或表达式。
对象式样式：style 属性接收的是一个 JS 对象（如 style={{ color: 'red' }}），而非传统的 CSS 字符串。

虚拟 DOM 并不是“真的快”，而是它通过最小化真实 DOM 操作，保证了性能的下限。

它是用普通的 JavaScript 对象来描述真实 DOM 树。这个对象包含了标签名、属性和子节点等信息，与真实 DOM 节点一一对应。

维度	虚拟 DOM	真实 DOM
本质	内存中的 JS 对象	浏览器的原生对象
重绘与回流	不会直接触发重绘回流，操作代价极小	频繁触发重绘回流，消耗大量性能
更新策略	差异化更新。通过 Diff 算法找出变化部分，进行定向增删改	通常需要完全销毁旧节点并重新创建

React 现在引入了 Fiber 架构，它将渲染工作拆分为多个小任务，利用浏览器的空闲时间进行处理，解决了大量 DOM 节点导致页面卡顿的问题。

React 遵循“自顶向下”的数据流动模式，这使得应用的状态追踪变得极其清晰。

数据下钻：数据通过 props 从父组件传递给子组件。
只读性：子组件无法直接修改接收到的 props。如果子组件想改变状态，必须调用父组件通过 props 传下来的回调函数，在父组件中修改状态（state）后再重新向下传递。
优势：这种模式避免了数据流动的混乱，使得调试（Debug）时能快速定位到是谁修改了数据。

组件化 (Component-Based) ：
- 将 UI 拆分成独立、可复用的代码块。组件可以拥有自己的状态（State），这极大地提高了大型项目的可维护性。
声明式编程 (Declarative) ：
- 在 React 中，你只需要告诉它“UI 应该长什么样”，而不需要手动操作 DOM 告诉它“如何去改变”。React 会根据状态自动更新视图。