说说对 React 的理解？有哪些特性？

一、是什么

React 是由 Facebook（现 Meta）于 2013 年开源的一个用于构建用户界面的 JavaScript 库。它的核心定位不是一个完整的框架，而是专注于 UI 层的视图库，通常被称为 MVC 架构中的 "V"（View）。

React 的设计哲学可以概括为三句话：

声明式（Declarative）：开发者只需描述 UI 在不同状态下的样子，React 负责高效地更新和渲染
组件化（Component-Based）：通过封装、组合可复用的组件来构建复杂的界面
一次学习，随处编写（Learn Once, Write Anywhere）：React 的理念可以延伸到 React Native（移动端）、React Three Fiber（3D）等多个平台

function Welcome({ name }) {
  return <h1>你好，{name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="React" />
      <Welcome name="开发者" />
    </div>
  );
}

上面的代码展示了 React 最基本的开发模式：用函数定义组件，用 JSX 描述 UI，通过 props 传递数据。

二、核心概念

2.1 JSX

JSX 是 JavaScript 的语法扩展，允许在 JS 中直接书写类似 HTML 的结构。它不是模板语言，而是会被 Babel 编译为函数调用：

// JSX 写法
const element = <h1 className="title">Hello</h1>;

// React 17+ 自动转换（automatic runtime）
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx("h1", { className: "title", children: "Hello" });

// React 17 之前（classic runtime）
const element = React.createElement("h1", { className: "title" }, "Hello");

JSX 的本质是 React.createElement 的语法糖，最终产出的是一个描述 UI 结构的普通 JavaScript 对象（ReactElement）。

2.2 虚拟 DOM

虚拟 DOM（Virtual DOM）是 React 的核心优化策略之一。它是真实 DOM 的轻量级 JavaScript 对象表示：

// 一个虚拟 DOM 节点的简化结构
const vnode = {
  type: "div",
  props: {
    className: "container",
    children: [
      { type: "h1", props: { children: "标题" } },
      { type: "p", props: { children: "内容" } },
    ],
  },
};

当状态变化时，React 不会直接操作真实 DOM，而是：

生成新的虚拟 DOM 树
与旧的虚拟 DOM 树进行 diff 比较
计算出最小变更集
批量更新真实 DOM

这种策略避免了频繁的 DOM 操作带来的性能开销。

2.3 单向数据流

React 采用自上而下的单向数据流。父组件通过 props 向子组件传递数据，子组件不能直接修改 props，只能通过回调函数通知父组件进行更新：

function Parent() {
  const [count, setCount] = useState(0);

  return <Child count={count} onIncrement={() => setCount((c) => c + 1)} />;
}

function Child({ count, onIncrement }) {
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

单向数据流使得数据变化可预测、可追踪，极大降低了调试复杂度。

2.4 组件化

React 中一切皆组件。组件可以是函数组件，也可以是类组件（现已不推荐）：

// 函数组件（推荐）
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

// 类组件（遗留代码中常见）
class Button extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  }
}

组件之间可以嵌套、组合，形成组件树。每个组件维护自己的状态和逻辑，实现高内聚、低耦合。

三、React 18/19 的演进

3.1 React 18 重要特性

React 18 于 2022 年发布，带来了并发渲染（Concurrent Rendering）作为核心升级：

并发模式与自动批处理

// React 18 之前，setTimeout 中的多次 setState 会触发多次渲染
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React 17: 触发两次渲染
  // React 18: 自动批处理，只触发一次渲染
}, 0);

新的 API

useTransition：标记低优先级更新，保持界面响应
useDeferredValue：延迟非关键值的更新
Suspense 在服务端渲染中的完整支持
useId：生成稳定的唯一 ID，解决 SSR 水合不匹配问题

function SearchResults({ query }) {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);

  function handleSearch(input) {
    startTransition(() => {
      const filtered = heavyFilterOperation(input);
      setResults(filtered);
    });
  }

  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} />
      {isPending ? <Spinner /> : <ResultList items={results} />}
    </div>
  );
}

新的根 API

// React 17
import ReactDOM from "react-dom";
ReactDOM.render(<App />, document.getElementById("root"));

// React 18
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<App />);

3.2 React 19 重要特性

React 19 在 2024 年底发布，进一步简化了开发体验：

React Compiler：自动进行组件级别的记忆化，开发者不再需要手动使用 useMemo、useCallback、React.memo
Actions：新的表单处理范式，useActionState 和 useFormStatus 简化表单交互
use() Hook：可以在组件中直接读取 Promise 和 Context
Server Components：真正的服务端组件，减少客户端 JavaScript 体积
ref 作为 prop：不再需要 forwardRef，ref 可以直接作为 prop 传递

// React 19: use() 读取异步数据
function UserProfile({ userPromise }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}

// React 19: Actions
function UpdateName() {
  const [error, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const name = formData.get("name");
      const error = await updateNameOnServer(name);
      return error;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>更新</button>
      {error && <p>{error}</p>}
    </form>
  );
}

四、与其他框架的对比

特性	React	Vue	Angular
定位	UI 库	渐进式框架	完整框架
模板	JSX	Template + JSX	Template
数据绑定	单向	双向 + 单向	双向
状态管理	外部方案为主	Pinia/Vuex	内置 Service
学习曲线	中等	较低	较高
生态系统	极丰富	丰富	完整内置
移动端方案	React Native	Uni-app/Weex	Ionic/NativeScript

React 的优势在于：

灵活性高：只负责视图层，技术选型自由度大
生态极其丰富：Next.js、Remix、React Native 等形成完整生态
社区活跃：全球最大的前端社区之一，问题解决方案丰富
就业市场：在全球范围内，React 是需求量最大的前端技能之一

React 的不足：

只是库不是框架：路由、状态管理等需要额外选择和配置
JSX 学习成本：对于习惯模板语法的开发者有一定门槛
更新频率快：新概念（Hooks、Concurrent、Server Components）需要持续学习

五、总结

React 的核心竞争力在于其声明式编程模型、虚拟 DOM 带来的性能优化、以及组件化带来的开发效率。从 React 16 的 Fiber 架构，到 React 18 的并发渲染，再到 React 19 的编译器优化和 Server Components，React 始终在探索前端开发的最佳实践。

对于面试来说，理解 React 不仅仅是知道它是什么，更要理解它为什么这样设计——声明式降低了心智负担，虚拟 DOM 提供了性能和跨平台的基础，单向数据流保证了应用的可预测性。这些设计理念是 React 能够持续演进的根基。

#说说对 React 的理解？有哪些特性？

#一、是什么

#二、核心概念

#2.1 JSX

#2.2 虚拟 DOM

#2.3 单向数据流

#2.4 组件化

#三、React 18/19 的演进

#3.1 React 18 重要特性

#3.2 React 19 重要特性

#四、与其他框架的对比

#五、总结