React 入门

React 是由 Meta（前 Facebook）开发并开源的 JavaScript UI 库，专注于构建用户界面。它于 2013 年开源，目前已成为最流行的前端技术之一。

react 核心概念

组件（Component）

React 的核心单元是组件（Component）。组件是一个返回 UI 描述的函数（或类），可以像拼积木一样组合成复杂的界面。

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

组件分为两类：

• 函数组件：现代 React 的主流写法，配合 Hooks 使用
• 类组件：早期写法，新项目不推荐使用

JSX

JSX 是 JavaScript 的语法扩展，允许在 JS 文件中写类似 HTML 的结构。它不是 HTML，会被编译工具（如 Babel、SWC）编译为 React.createElement() 调用。

const element = <div className="container">Hello</div>;

// 编译后等价于：
const element = React.createElement("div", { className: "container" }, "Hello");

详见：JSX 介绍

Props

Props（属性）是组件的输入，由父组件传入，在子组件内部是只读的。

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// 使用
<Button label="提交" onClick={() => console.log("clicked")} />

State

State（状态）是组件内部管理的可变数据。状态变化会触发组件重新渲染。

import { useState } from "react";

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

虚拟 DOM

React 在内存中维护一棵虚拟 DOM 树。每次状态更新时，React 通过 Diffing 算法对比新旧虚拟 DOM，计算出最小变更集，再批量更新真实 DOM，从而提升性能。

详见：Virtual DOM

Hooks

Hooks 是 React 16.8 引入的特性，让函数组件也能使用状态和生命周期功能。

useState

管理局部状态。

const [value, setValue] = useState(initialValue);

useEffect

处理副作用（如数据请求、订阅、手动 DOM 操作）。

useEffect(() => {
  // 副作用逻辑
  fetchData();

  return () => {
    // 清理函数（组件卸载时执行）
  };
}, [dependency]); // 依赖数组

依赖数组规则：

• 省略 → 每次渲染后都执行
• [] → 只在挂载时执行一次
• [a, b] → a 或 b 变化时执行

useContext

订阅 React Context，用于跨组件层级传递数据（避免 prop drilling）。

const theme = useContext(ThemeContext);

useRef

持有一个可变引用，变更不触发重渲染。常用于访问 DOM 元素或保存不需要渲染的值。

const inputRef = useRef(null);

// 访问 DOM
inputRef.current.focus();

useMemo / useCallback

用于性能优化，缓存计算结果或函数引用，避免不必要的重计算和子组件重渲染。

const result = useMemo(() => expensiveCalc(a, b), [a, b]);
const handleClick = useCallback(() => doSomething(id), [id]);

数据流

React 遵循单向数据流：数据从父组件通过 Props 流向子组件，子组件通过回调函数向父组件传递事件。

父组件 → props → 子组件
子组件 → callback → 父组件

当多个组件需要共享状态时，通常将状态提升到最近的公共父组件，或使用 Context / 状态管理库（如 Jotai、Zustand、Redux）。

生命周期

函数组件通过 useEffect 模拟类组件的生命周期阶段：

与框架的关系

React 本身只是 UI 库，不包含路由、数据请求、SSR 等能力。实际项目通常搭配框架使用：

React 与 ReactJS 的关系

React 和 ReactJS 是同一个东西，只是叫法不同。React 是 Meta（前 Facebook）在 2013 年开源时的官方名称；ReactJS 是早期社区的非正式叫法，加 “JS” 后缀是为了与其他同名项目区分。现在官方文档、npm 包（react）、GitHub 仓库全部统一使用 React，ReactJS 这一叫法已逐渐淡出。

版本演进

v16.8（Hooks）是最关键的分界线：之前以 Class 组件为主，之后社区全面转向函数式组件 + Hooks 写法。

参考资料

• React 官方文档
• React GitHub