React JS 入门介绍：构建现代用户界面的基石

前言

在当今快速发展的 Web 开发领域，构建复杂、交互性强的用户界面（UI）是前端开发者面临的核心挑战。随着单页应用（SPA）的兴起，传统的 HTML、CSS 和 JavaScript 开发模式在应对大规模应用时变得越来越困难。数据的管理、UI 的同步更新以及组件的复用成为了痛点。正是在这样的背景下，像 React 这样的现代 JavaScript 库应运而生，彻底改变了前端开发的范式。

React，由 Facebook（现 Meta）开发并维护，是一个用于构建用户界面的 JavaScript 库。它以其高效的性能、声明式的编程风格、组件化的架构以及庞大的生态系统迅速成为了前端开发的主流选择之一。对于希望进入前端领域或提升现有技能的开发者来说，掌握 React 几乎是必经之路。

本文旨在为完全没有 React 经验的初学者提供一个全面、深入的入门介绍。我们将从 React 的基本概念讲起，解释它为什么如此受欢迎，深入探讨其核心特性，指导你如何搭建开发环境，并通过一个简单的实例带你动手实践。读完本文，你将对 React 有一个清晰的认识，并具备继续深入学习的基础。

第一部分：初识 React – 它是什么？

1.1 React 的定义

React 是一个用于构建用户界面的 JavaScript 库。请注意，它是一个“库”，而不是一个完整的“框架”（比如 Angular 或 Vue）。这意味着 React 只专注于解决 UI 层面的问题，而不包括路由、状态管理、数据请求等功能（尽管它提供了解决这些问题的机制和模式，并有强大的第三方库生态支持）。

React 最核心的理念是 声明式编程 和 组件化。

• 声明式编程 (Declarative Programming): 传统命令式编程关注的是“如何”实现一个目标，你需要一步一步地告诉计算机怎么做。而声明式编程则关注的是“什么”，你只需要描述你想要的结果，系统会自动找出如何达到这个结果。在 React 中，你只需描述给定状态下 UI 应该是什么样子，React 会负责根据数据变化高效地更新 UI。这让代码更容易理解和维护。
• 组件化 (Component-Based): React 鼓励将 UI 切分成独立、可复用的代码块，称为“组件”。每个组件都包含自己的逻辑和视图，它们可以像乐高积木一样组合起来构建复杂的界面。这种模块化的方法提高了代码的复用性、可维护性和开发效率。

1.2 React 的历史和发展

React 最初由 Jordan Walke 在 Facebook 开发，用于构建 Facebook 的广告系统界面。2011 年首次内部部署，2012 年用于 Instagram。com，并最终于 2013 年 5 月在 JSConf US 大会上开源。自开源以来，React 迅速获得了广泛的关注和应用，成为了前端社区最受欢迎的库之一。

React 经历了多次重要更新。最初的版本主要基于 类组件 (Class Components)。随着 Hook (钩子) 的引入（React 16.8），函数组件 (Functional Components) 变得更加强大和易用，并逐渐成为主流的开发方式。Hook 允许你在不编写 class 的情况下使用 state 以及其他的 React 特性，极大地简化了组件的逻辑。

第二部分：为什么选择 React？React 的优势

React 为什么如此流行？它带来了哪些好处？

2.1 高效的性能：虚拟 DOM (Virtual DOM)

直接操作原生 DOM（文档对象模型）通常是昂贵的性能开销。每当数据变化需要更新 UI 时，如果直接操作 DOM，浏览器需要重新计算布局、绘制页面，尤其是在频繁更新和复杂界面中，这会显著降低应用性能。

React 引入了 虚拟 DOM (Virtual DOM) 的概念来解决这个问题。

• 什么是虚拟 DOM？ 虚拟 DOM 是真实 DOM 在内存中的一个抽象表示。它是一个轻量级的 JavaScript 对象树，与真实 DOM 结构一一对应。
• 工作原理：
  1. 当组件状态或数据发生变化时，React 不会直接更新真实 DOM。
  2. React 会创建一个新的虚拟 DOM 树。
  3. React 会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较（这个过程称为 Diffing 或 协调 Reconciliation）。它会找出两棵树之间最小的差异。
  4. React 只会将这些最小的差异应用到真实的 DOM 上，而不是重新渲染整个界面。
• 优势： 这种机制极大地减少了直接操作 DOM 的次数和范围，从而提高了 UI 更新的效率，使得应用在数据变化时能够保持流畅。

2.2 组件化与代码复用

如前所述，组件化是 React 的核心思想。你可以将一个复杂的页面拆分成多个独立、可复用的组件（比如：导航栏组件、侧边栏组件、按钮组件、列表项组件等）。

• 优势：
  • 提高复用性： 相同的组件可以在应用的不同地方甚至不同的项目中重复使用。
  • 提升开发效率： 无需重复编写相似的代码。
  • 易于维护： 每个组件只负责自身的小部分功能，修改一个组件通常不会影响其他组件。
  • 更好的协作： 不同的开发者可以并行开发不同的组件。

2.3 声明式编程风格

React 的声明式语法使得 UI 代码更具可读性和可预测性。你只需描述 UI 在不同状态下的外观，而不用关心具体的 DOM 操作细节。

• 优势：
  • 代码更易懂： 代码直接反映了 UI 的最终状态，而不是一系列操作步骤。
  • 更易调试： 当出现问题时，你更容易通过查看组件的状态和属性来定位问题。
  • 减少 Bug： 声明式代码降低了手动操作 DOM 可能引入的错误。

2.4 强大的生态系统和社区支持

作为一个流行多年的库，React 拥有极其庞大和活跃的社区。这意味着：

• 丰富的第三方库： 几乎所有你能想到的前端开发需求（路由、状态管理、UI 组件库、数据可视化等）都有成熟的第三方库可供选择（如 React Router, Redux, MobX, Ant Design, Material UI）。
• 大量的学习资源： 官方文档详尽，网上有海量的教程、博客、课程和视频。
• 问题解决更方便： 遇到问题时，你很容易在 Stack Overflow 或社区论坛找到解决方案。
• 持续的更新和改进： Meta 和社区持续投入，确保 React 的前沿性和稳定性。

2.5 服务端渲染 (Server-Side Rendering – SSR) 支持

React 可以很方便地实现服务器端渲染，这对于提高首屏加载速度和改善 SEO（搜索引擎优化）非常重要。使用 Next.js 等 React 框架可以更轻松地实现 SSR。

第三部分：React 的核心概念深入

理解以下核心概念是学习 React 的关键。

3.1 组件 (Components)

组件是 React 应用的基石。它们是独立的、可复用的代码块，定义了 UI 的一部分。React 中主要有两种类型的组件：

3.1.1 函数组件 (Functional Components)

这是目前主流和推荐的写法。它们是简单的 JavaScript 函数，接收一个 props 对象作为参数，并返回 React 元素（通常使用 JSX 语法描述）。

“`jsx
import React from ‘react’; // 在老版本中可能需要导入

function WelcomeMessage(props) {
return

Hello, {props.name}!

;
}

// 使用组件
//
“`

3.1.2 类组件 (Class Components)

这是 React 早期主要的写法。它们是 ES6 的类，继承自 React.Component，必须包含一个 render() 方法，该方法返回 React 元素。类组件有自己的内部状态 (state) 和生命周期方法。

“`jsx
import React from ‘react’;

class WelcomeMessageClass extends React.Component {
render() {
return

Hello, {this.props.name}!

;
}
}

// 使用组件
//
“`

Hook 出现后，函数组件通过 useState, useEffect 等 Hook 也能拥有状态和处理生命周期相关的逻辑，因此函数组件因其简洁性而更受欢迎。

3.2 JSX (JavaScript XML)

JSX 是 React 推荐使用的语法糖，它允许你在 JavaScript 代码中书写类似 HTML 的结构。

jsx
const element = <h1>Hello, world!</h1>;

• 特点：
  • 它不是标准的 JavaScript 或 HTML，需要在构建过程中通过 Babel 等工具转换成普通的 JavaScript 代码（React.createElement() 调用）。
  • 可以在 JSX 中嵌入 JavaScript 表达式，使用大括号 {} 包裹。
  • HTML 属性在 JSX 中使用 camelCase 命名（如 className 代替 class，htmlFor 代替 for）。
  • 标签必须正确闭合（如 <br />, <img>）。
  • 相邻的 JSX 元素必须包裹在一个父元素中，或者使用 Fragment (<>...)。

“`jsx
// 嵌入 JavaScript 表达式
const name = ‘React User’;
const element =

Hello, {name}!

;

// 使用 Fragment
function App() {
return (
<>

Title

Some content

);
}
“`

JSX 让 UI 结构更加直观，提高了代码的可读性。

3.3 Props (Properties)

Props 是组件之间传递数据的方式。它们是父组件向子组件传递数据的单向数据流。

• Props 以对象的形式传递给组件，是组件函数的参数或类组件实例上的 this.props。
• Props 是只读的 (read-only)。子组件不应该尝试修改接收到的 props。如果子组件需要改变基于 props 的数据，它应该管理自己的状态。

“`jsx
// 父组件
function ParentComponent() {
return ;
}

// 子组件
function ChildComponent(props) {
return

{props.message}

; // 使用接收到的 props
}
“`

Props 是实现组件复用和数据流动的关键。

3.4 State (状态)

State 是组件内部管理的可变数据。当组件的 State 发生变化时，组件会重新渲染。State 是驱动组件更新和交互的基础。

• 在函数组件中，使用 useState Hook 来管理 State。
• useState 返回一个数组：第一个元素是当前 State 的值，第二个元素是一个函数，用于更新 State。
• 重要： 永远不要直接修改 State 的值（例如 this.state.count = ... 或 count = ...）。总是使用提供的更新函数来更新 State。这是因为 React 需要通过这个函数调用来知道 State 发生了变化，从而触发重新渲染。

“`jsx
import React, { useState } from ‘react’;

function Counter() {
// 声明一个 state 变量 ‘count’，初始值为 0
const [count, setCount] = useState(0);

const increment = () => {
// 使用 setCount 函数更新 count 的值
setCount(count + 1);
};

return (

);
}
“`

Props 和 State 是 React 中两个最重要的数据概念。Props 用于组件之间的数据传递（自上而下），State 用于组件内部管理自身的可变数据。

3.5 事件处理 (Event Handling)

在 React 中处理事件与原生 DOM 事件类似，但有一些区别：

• 事件名采用 camelCase 命名（如 onClick 而不是 onclick）。
• 传递的是函数引用，而不是字符串。
• React 实现了一个合成事件系统 (Synthetic Event System)，它封装了浏览器原生事件，提供了跨浏览器的兼容性。合成事件对象与原生事件对象类似，但并非完全相同。

“`jsx
function MyButton() {
const handleClick = (event) => {
// event 是合成事件对象
console.log(‘Button clicked!’, event);
};

return (

Click Me

);
}
“`

3.6 条件渲染 (Conditional Rendering)

根据不同的条件渲染不同的 UI 元素在 React 中非常常见。可以使用 JavaScript 的控制流语句（if, &&, ? :）来实现。

“`jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return

Welcome back!

;
} else {
return

Please sign up.

;
}
}

// 使用逻辑 && 运算符 (如果条件为真，则渲染后面的元素)
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (

);
}

// 使用三元运算符
function UserStatus(props) {
return (

);
}
“`

3.7 列表和 Key (Lists and Keys)

渲染列表（如列表项、表格行）是常见的需求。可以使用 JavaScript 的 map() 方法来遍历数组，并为每个元素返回一个 React 元素。

重要： 渲染列表时，每个列表项必须包含一个特殊的 key prop。

• Key 的作用： key prop 帮助 React 识别哪些元素在列表中改变了、被添加了或被删除了。它在 Diffing 算法中用于高效地更新列表。
• Key 的选择： Key 应该是列表中元素的唯一标识符。通常使用数据中的 ID。如果数据没有稳定 ID，可以使用数组索引作为 key，但只有在列表项不会被重新排序、添加或删除的静态列表中才这样做。使用索引作为 key 在动态列表中可能导致性能问题和意外的 Bug。

“`jsx
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be placed on the list item element

);
return (

{listItems}

);
}

const numbers = [1, 2, 3, 4, 5];
// 使用组件
//
“`

3.8 Hook (钩子)

Hook 是 React 16.8 版本引入的新特性。它们允许你在函数组件中使用 State 和其他 React 特性，而无需编写 class。

• 主要的内置 Hook：
  • useState: 用于在函数组件中添加 State。
  • useEffect: 用于处理副作用（如数据获取、订阅、手动修改 DOM 等）。它在组件渲染后执行，可以替代类组件中的 componentDidMount, componentDidUpdate, componentWillUnmount 等生命周期方法。
  • useContext: 用于在组件树中跨层级共享数据（Context API）。
  • useRef: 用于创建可变的引用对象，其值在组件的整个生命周期内保持不变，常用于访问 DOM 元素或在多次渲染之间存储数据。
  • useMemo: 用于记住计算结果，避免在每次渲染时都进行昂贵的计算。
  • useCallback: 用于记住函数，避免在每次渲染时都创建新的函数实例，常用于优化性能。
• Hook 的规则：
  • 只能在函数组件的顶层调用 Hook，不要在循环、条件判断或嵌套函数中调用。
  • 只能在 React 函数组件中调用 Hook，不要在普通的 JavaScript 函数中调用（除了自定义 Hook）。

掌握 Hook 对于现代 React 开发至关重要。

第四部分：搭建 React 开发环境

开始编写 React 代码之前，你需要搭建一个开发环境。最简单快捷的方式是使用官方推荐的脚手架工具。

4.1 前提条件

• Node.js: React 开发需要 Node.js 环境来运行构建工具（如 npm 或 yarn）。请确保你的电脑上安装了 Node.js（版本 14 或更高，推荐 LTS 版本）。你可以从 Node.js 官方网站 下载并安装。安装 Node.js 后，npm（Node 包管理器）或 yarn（另一个包管理器）也会一并安装。

4.2 选择构建工具

• Create React App (CRA): 曾经是官方推荐的零配置入门工具，非常适合新手。它包含了构建 React 应用所需的一切，但相对较慢且不够灵活。
• Vite: 一个更现代、更快的构建工具，由 Vue.js 的作者开发，但也完美支持 React。它使用 ES modules 的原生支持，实现了极速的开发服务器启动和热模块更新。Vite 逐渐成为 React 开发的新宠。

对于初学者，Vite 是一个更好的选择，因为它更快，能让你更快看到修改的效果。我们将以 Vite 为例进行介绍。

4.3 使用 Vite 创建 React 项目

打开你的终端或命令行工具，执行以下命令：

“`bash

使用 npm

npm create vite@latest my-react-app –template react

或者使用 yarn

yarn create vite my-react-app –template react

或者使用 pnpm

pnpm create vite my-react-app –template react

“`

• npm create vite@latest: 这是通过 npm 执行 create-vite 包的命令，@latest 确保使用最新版本。
• my-react-app: 这是你的项目文件夹名称，你可以替换成任何你喜欢的名字。
• --template react: 指定使用 React 模板创建项目。你也可以使用 react-ts 模板来创建 TypeScript 项目。

执行命令后，Vite 会快速创建一个项目结构。接下来，进入项目文件夹并安装依赖：

bash
cd my-react-app
npm install # 或者 yarn install 或 pnpm install

4.4 运行开发服务器

安装完成后，你可以启动开发服务器：

bash
npm run dev # 或者 yarn dev 或 pnpm dev

这个命令会启动一个本地开发服务器，通常在 http://localhost:5173（端口号可能会有变化）上运行你的应用。打开浏览器访问这个地址，你应该能看到 Vite 和 React 的默认启动页面。

当你修改了项目文件后，开发服务器会自动重新加载应用，让你立即看到更改。

4.5 项目结构概览

使用 Vite 创建的 React 项目结构通常是这样的：

my-react-app/
├── node_modules/ # 项目依赖包
├── public/ # 静态资源文件夹
│ └── vite.svg
├── src/ # 源码文件夹
│ ├── assets/ # 静态资源 (图片等)
│ │ └── react.svg
│ ├── App.css # App 组件的样式
│ ├── App.jsx # 根组件 (App)
│ ├── index.css # 全局样式
│ ├── main.jsx # 应用入口文件
│ └── react.svg # vite logo
├── .gitignore # Git 忽略文件
├── index.html # HTML 入口文件
├── package.json # 项目配置和依赖信息
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明

• index.html: 这是应用的入口 HTML 文件。注意其中有一个 <div id="root"></div>，React 应用将会被渲染到这个 DOM 元素中。
• src/main.jsx: 这是应用的 JavaScript 入口文件。它负责引入 React 库、你的根组件 (App)，并将根组件挂载到 index.html 中的 #root 元素上。
• src/App.jsx: 这是你的根组件，你可以在这里开始构建你的应用 UI。
• src/index.css 和 src/App.css: 全局和组件级别的样式文件。

第五部分：构建第一个简单的 React 组件 (计数器)

现在，让我们修改 src/App.jsx 文件，创建一个简单的计数器组件来实践 React 的 State 和事件处理。

清除 App.jsx 中原有的代码，替换为以下内容：

“`jsx
import React, { useState } from ‘react’; // 导入 React 和 useState Hook
import ‘./App.css’; // 导入样式 (可选)

function App() {
// 使用 useState Hook 声明一个 state 变量 ‘count’
// 初始值为 0
const [count, setCount] = useState(0);

// 定义一个事件处理函数
const handleIncrement = () => {
// 使用 setCount 函数更新 count 的值
// React 会检测到 state 变化并重新渲染组件
setCount(count + 1);
};

const handleDecrement = () => {
setCount(count – 1);
};

const handleReset = () => {
setCount(0);
};

return (

  {/* 将事件处理函数关联到按钮的 onClick 事件 */}
  <button onClick={handleIncrement}>Increment (+)</button>
  <button onClick={handleDecrement}>Decrement (-)</button>
  <button onClick={handleReset}>Reset</button>
</div>