React入门 | React 新手入门与常用库和工具

一、React 简介

React 是由 Facebook 开发并维护的一款 JavaScript 库，主要用于构建交互式的用户界面。它具有以下特点和优势：

1. 组件化：将页面拆分成一个个独立的组件，每个组件都有自己的逻辑和 UI，便于开发、测试和维护。组件可以像搭积木一样组合起来构建复杂的页面。
2. 虚拟 DOM：React 引入了虚拟 DOM 的概念，它是真实 DOM 的轻量级副本。当数据发生变化时，React 先更新虚拟 DOM，然后通过对比虚拟 DOM 和真实 DOM 的差异，只对需要更新的部分进行实际的 DOM 操作，从而大幅提高页面更新的效率，提升应用性能。
3. 单向数据流：数据在 React 应用中沿着一个方向流动，从父组件传递到子组件，使得应用的数据流向清晰，便于调试和理解。
4. 声明式编程：开发者只需要关注页面应该呈现的样子，而不需要过多关注如何实现页面的更新，React 会自动处理页面的渲染逻辑。

二、前置知识

在学习 React 之前，建议你具备以下基础知识：

1. HTML：了解 HTML 的基本标签、属性和结构，能够构建简单的静态页面。
2. CSS：掌握 CSS 的基本选择器、样式规则，能够对页面进行美化，了解盒模型、浮动、定位等布局知识更佳。
3. JavaScript 基础：熟悉变量、数据类型、函数、条件语句、循环语句等基本语法。
4. ES6 及以上语法：

• 箭头函数：() => {}的语法和使用场景。
• 解构赋值：对数组和对象进行解构，简化变量的赋值操作。
• 模板字符串：使用${}在字符串中嵌入变量或表达式。
• 类和继承：了解类的定义、构造函数、方法以及继承的概念。
• 模块系统：使用import和export进行模块的导入和导出。

三、环境搭建

（一）安装 Node.js 和 npm

React 开发需要依赖 Node.js 和 npm（Node Package Manager），npm 是 Node.js 的包管理工具。

1. 访问 Node.js 官网（Node.js — Run JavaScript Everywhere），下载并安装适合自己操作系统的 Node.js 版本（建议下载 LTS 版本，即长期支持版本）。
2. 安装完成后，打开命令行工具（Windows 系统可使用 cmd 或 PowerShell，Mac 和 Linux 系统使用终端），输入以下命令检查是否安装成功：

node -v
npm -v

如果能显示出对应的版本号，则说明安装成功。

（二）使用 create-react-app 脚手架创建项目

create-react-app 是 React 官方提供的脚手架工具，能够快速创建一个 React 项目，并配置好开发环境、依赖项等。

1. 安装 create-react-app（如果之前没有安装过），在命令行中输入：

npm install -g create-react-app

1. 创建 React 项目，在命令行中进入想要创建项目的目录，然后输入：

create-react-app my-first-react-app

其中my-first-react-app是项目的名称，你可以根据自己的需求修改。

3. 进入项目目录：

cd my-first-react-app

1. 启动项目：

npm start

启动成功后，会自动在浏览器中打开http://localhost:3000，你将看到 React 的默认欢迎页面。

四、React 核心概念

（一）组件

组件是 React 的基本单位，分为函数组件和类组件。

1. 函数组件：是一个返回 React 元素的 JavaScript 函数。

function Welcome() {return <h1>Hello, React!</h1>;
}

1. 类组件：通过继承React.Component类来定义，需要实现render()方法，该方法返回 React 元素。

import React from 'react';
class Welcome extends React.Component {render() {return <h1>Hello, React!</h1>;}
}

在实际开发中，函数组件使用更为广泛，尤其是结合 React Hooks 之后。

（二）JSX

JSX 是 React 的语法扩展，看起来像 HTML，但实际上是 JavaScript 的语法糖。它允许在 JavaScript 中编写类似 HTML 的代码，最终会被编译成普通的 JavaScript 代码。

1. 语法规则：

• JSX 中的标签必须闭合，如<div></div>，单标签如<img/>。
• 类名使用className而不是class，因为class是 JavaScript 的关键字。
• 内联样式需要使用对象形式，如<div style={{color: 'red', fontSize: '16px'}}></div>。
• 可以在 JSX 中使用 JavaScript 表达式，需要用{}包裹，如<p>{2 + 3}</p>会显示 5。

1. 在组件中使用：

function UserInfo(props) {return (<div className="user-info"><h2>Name: {props.name}</h2><p>Age: {props.age}</p></div>);
}

（三）Props

Props 用于组件之间传递数据，是从父组件传递到子组件的只读属性，子组件不能修改 Props 的值。

// 父组件
function App() {return <UserInfo name="Tom" age={18} />;
}
// 子组件
function UserInfo(props) {return (<div><p>Name: {props.name}</p><p>Age: {props.age}</p></div>);
}

（四）State

State 用于管理组件内部的状态，当 State 发生变化时，组件会重新渲染。在函数组件中，可以使用useState Hook 来管理 State。

import React, { useState } from 'react';
function Counter() {// 声明一个count状态，初始值为0，setCount是更新count的函数const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

五、小案例：待办事项列表

下面我们通过一个待办事项列表的小案例，综合运用前面所学的知识。

import React, { useState } from 'react';
// 待办事项项组件
function TodoItem(props) {return (<li style={{ textDecoration: props.completed ? 'line-through' : 'none' }}>{props.text}<button onClick={props.onDelete}>Delete</button><button onClick={props.onToggle}>{props.completed ? 'Undo' : 'Complete'}</button></li>);
}
// 待办事项列表组件
function TodoList() {const [todos, setTodos] = useState([]);const [inputText, setInputText] = useState('');const handleAddTodo = () => {if (inputText.trim() !== '') {setTodos([...todos, { text: inputText, completed: false }]);setInputText('');}};const handleDeleteTodo = (index) => {const newTodos = [...todos];newTodos.splice(index, 1);setTodos(newTodos);};const handleToggleTodo = (index) => {const newTodos = [...todos];newTodos[index].completed = !newTodos[index].completed;setTodos(newTodos);};return (<div><inputtype="text"value={inputText}onChange={(e) => setInputText(e.target.value)}onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}/><button onClick={handleAddTodo}>Add</button><ul>{todos.map((todo, index) => (<TodoItemkey={index}text={todo.text}completed={todo.completed}onDelete={() => handleDeleteTodo(index)}onToggle={() => handleToggleTodo(index)}/>))}</ul></div>);
}
// 应用入口组件
function App() {return (<div><h1>Todo List</h1><TodoList /></div>);
}
export default App;

在这个案例中，我们创建了一个待办事项列表，实现了添加待办事项、删除待办事项、标记待办事项为已完成或未完成的功能。使用了组件的嵌套（App组件包含TodoList组件，TodoList组件包含TodoItem组件），通过 Props 在组件之间传递数据和方法，使用 State 管理待办事项列表和输入框的文本。

六、React 常用库和工具

1. React Router：用于实现单页应用的路由管理，能够根据不同的 URL 显示不同的组件。
2. Redux：用于管理应用的全局状态，当应用规模较大时，能够更好地组织和管理状态。
3. Axios：用于发送 HTTP 请求，与后端进行数据交互。
4. Create React App：前面提到的脚手架工具，简化 React 项目的创建和配置。
5. React Developer Tools：浏览器扩展工具，用于调试 React 应用，查看组件层次结构、Props 和 State 等。

在 React 生态系统中，丰富的库和工具能够极大提升开发效率，解决实际项目中的各类问题。以下是 React 开发中最常用的核心工具和库的详细解析：

七、React Router：路由管理利器

（一）概述

React Router 是 React 官方推荐的路由解决方案，用于实现单页应用（SPA）的页面跳转和路由控制。在单页应用中，页面内容的切换无需重新加载整个页面，而是通过路由匹配渲染对应的组件，提升用户体验。

（二）核心功能

• 基于 URL 路径匹配对应的组件
• 支持嵌套路由（如/user/profile包含User和Profile组件）
• 提供编程式导航（通过 API 实现页面跳转）
• 支持路由参数（如/user/:id获取动态 ID）
• 实现路由守卫（控制页面访问权限）

（三）基本用法（v6 版本）

// 安装
npm install react-router-dom

// 路由配置示例
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
// 页面组件
const Home = () => <h1>首页</h1>;
const User = () => {const { id } = useParams(); // 获取路由参数return <h1>用户ID：{id}</h1>;
};
const About = () => <h1>关于我们</h1>;
// 路由配置
const App = () => (<BrowserRouter>{/* 导航链接 */}<nav><Link to="/">首页</Link> |<Link to="/user/123">用户页</Link> |<Link to="/about">关于</Link></nav>{/* 路由匹配 */}<Routes><Route path="/" element={<Home />} /><Route path="/user/:id" element={<User />} /><Route path="/about" element={<About />} /></Routes></BrowserRouter>
);

（四）优势

• 与 React 组件模型深度融合，使用声明式语法
• 支持多种路由模式（BrowserRouter使用 HTML5 History，HashRouter使用 URL 哈希）
• 灵活的路由配置方式，适合复杂应用的路由管理
• 良好的 TypeScript 支持，提升代码健壮性

八、Redux：全局状态管理

（一）概述

Redux 是基于 "单一数据源" 和 "不可变状态" 理念设计的状态管理库，主要解决 React 应用中跨组件状态共享的问题。当应用规模扩大（如电商平台的购物车、用户登录状态），组件间状态传递变得复杂时，Redux 能提供清晰的状态管理方案。

（二）核心概念

• Store：存储整个应用的状态树
• Action：描述状态变化的普通 JavaScript 对象（必须包含type字段）
• Reducer：纯函数，根据 Action 计算新状态（(state, action) => newState）
• Dispatch：发送 Action 到 Reducer 的方法

（三）基本用法（结合 Redux Toolkit 简化版）

// 安装
npm install @reduxjs/toolkit react-redux

// 1. 创建切片（slice）
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';
const counterSlice = createSlice({name: 'counter',initialState: { value: 0 },reducers: {increment: (state) => {state.value += 1; // Redux Toolkit内部使用Immer库，支持"直接修改"状态},decrement: (state) => {state.value -= 1;}}
});
// 2. 导出Action
export const { increment, decrement } = counterSlice.actions;
// 3. 创建Store
const store = configureStore({reducer: {counter: counterSlice.reducer}
});
// 4. 在组件中使用
const CounterComponent = () => {const count = useSelector((state) => state.counter.value); // 获取状态const dispatch = useDispatch(); // 获取dispatch方法return (<div><button onClick={() => dispatch(increment())}>+</button><span>{count}</span><button onClick={() => dispatch(decrement())}>-</button></div>);
};
// 5. 应用入口（提供Store）
const App = () => (<Provider store={store}><CounterComponent /></Provider>
);

（四）优势

• 集中管理应用状态，解决跨组件通信难题
• 状态变化可追踪，便于调试（结合 Redux DevTools）
• 纯函数 Reducer 保证状态变化可预测
• Redux Toolkit 简化了传统 Redux 的繁琐模板代码

九、Axios：HTTP 请求处理

（一）概述

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境，是 React 项目中与后端 API 交互的首选工具。

（二）核心功能

• 支持浏览器端和 Node.js 端的 HTTP 请求
• 拦截请求和响应（如添加认证令牌、统一错误处理）
• 自动转换 JSON 数据
• 取消请求
• 超时设置

（三）基本用法

// 安装
npm install axios

// 1. 基础请求
import axios from 'axios';
// GET请求
axios.get('/api/users').then(response => console.log(response.data)).catch(error => console.error(error));
// POST请求
axios.post('/api/users', { name: 'John', age: 30 }).then(response => console.log('创建成功')).catch(error => console.error(error));
// 2. 创建实例（配置基础路径）
const api = axios.create({baseURL: 'https://api.example.com',timeout: 5000, // 超时时间headers: { 'Content-Type': 'application/json' }
});
// 3. 请求拦截器（添加认证token）
api.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});
// 4. 响应拦截器（统一错误处理）
api.interceptors.response.use(response => response,error => {if (error.response?.status === 401) {// 未授权，跳转登录页window.location.href = '/login';}return Promise.reject(error);}
);

（四）优势

• API 简洁直观，比原生fetch更易用
• 内置拦截器机制，便于统一处理请求 / 响应
• 支持取消请求和超时控制，提升用户体验
• 良好的浏览器兼容性（包括 IE11）

十、Create React App：项目脚手架

（一）概述

Create React App（CRA）是 React 官方推出的零配置脚手架工具，用于快速搭建 React 开发环境，无需手动配置 Webpack、Babel 等工具链。

（二）核心功能

• 自动配置开发环境（Webpack、Babel、ESLint 等）
• 内置开发服务器（支持热重载）
• 一键构建生产版本（代码压缩、优化）
• 支持 TypeScript、CSS Modules、Sass 等

（三）基本用法

# 创建项目
npx create-react-app my-app
# 进入项目目录
cd my-app
# 启动开发服务器（http://localhost:3000）
npm start
# 构建生产版本（输出到build目录）
npm run build
# 运行测试
npm test
# 暴露配置文件（谨慎使用，不可逆）
npm run eject

（四）优势与局限

• 优势：零配置快速上手，适合初学者；内置最佳实践；定期更新维护
• 局限：配置固化，自定义配置需 eject（不可逆）；大型项目构建速度较慢

替代方案：对于追求更快构建速度的项目，可考虑 Vite（基于 ES 模块的前端构建工具）

十一、React Developer Tools：调试工具

（一）概述

React Developer Tools 是浏览器扩展程序（支持 Chrome、Firefox 等），专为 React 应用调试设计，是开发 React 项目的必备工具。

（二）核心功能

• 查看组件层次结构（类似 DOM 树）
• 检查组件的 Props 和 State 实时值
• 跟踪组件的重渲染情况
• 与 Redux DevTools 配合调试状态变化
• 性能分析（识别不必要的重渲染）

（三）使用方法

1. 在浏览器扩展商店搜索 "React Developer Tools" 并安装
2. 打开 React 应用页面，按 F12 打开开发者工具
3. 切换到 "Components" 标签查看组件树，"Profiler" 标签进行性能分析

（四）实用技巧

• 点击组件可在右侧面板查看其 Props、State 和 Hooks
• 使用 "Highlight Updates" 功能标记重渲染的组件（闪烁效果）
• 性能分析时，点击 "Record" 记录操作过程，生成性能报告

十二、扩展工具推荐

除上述核心工具外，以下工具在实际开发中也频繁使用：

1. Styled Components：CSS-in-JS 解决方案，允许在 JavaScript 中编写 CSS 样式，实现组件样式封装

import styled from 'styled-components';
const Button = styled.button`color: white;background: blue;padding: 8px 16px;
`;

1. React Query：用于管理服务器状态（如 API 数据缓存、同步、失效），简化数据获取逻辑
2. Formik + Yup：Formik 处理表单状态和提交逻辑，Yup 用于表单验证，两者结合大幅简化表单开发
3. Next.js：基于 React 的全栈框架，支持服务端渲染（SSR）、静态站点生成（SSG），优化 SEO 和首屏加载速度