一、React 简介
React 是由 Facebook 开发并维护的一款 JavaScript 库,主要用于构建交互式的用户界面。它具有以下特点和优势:
- 组件化:将页面拆分成一个个独立的组件,每个组件都有自己的逻辑和 UI,便于开发、测试和维护。组件可以像搭积木一样组合起来构建复杂的页面。
- 虚拟 DOM:React 引入了虚拟 DOM 的概念,它是真实 DOM 的轻量级副本。当数据发生变化时,React 先更新虚拟 DOM,然后通过对比虚拟 DOM 和真实 DOM 的差异,只对需要更新的部分进行实际的 DOM 操作,从而大幅提高页面更新的效率,提升应用性能。
- 单向数据流:数据在 React 应用中沿着一个方向流动,从父组件传递到子组件,使得应用的数据流向清晰,便于调试和理解。
- 声明式编程:开发者只需要关注页面应该呈现的样子,而不需要过多关注如何实现页面的更新,React 会自动处理页面的渲染逻辑。
二、前置知识
在学习 React 之前,建议你具备以下基础知识:
- HTML:了解 HTML 的基本标签、属性和结构,能够构建简单的静态页面。
- CSS:掌握 CSS 的基本选择器、样式规则,能够对页面进行美化,了解盒模型、浮动、定位等布局知识更佳。
- JavaScript 基础:熟悉变量、数据类型、函数、条件语句、循环语句等基本语法。
- ES6 及以上语法:
- 箭头函数:() => {}的语法和使用场景。
- 解构赋值:对数组和对象进行解构,简化变量的赋值操作。
- 模板字符串:使用${}在字符串中嵌入变量或表达式。
- 类和继承:了解类的定义、构造函数、方法以及继承的概念。
- 模块系统:使用import和export进行模块的导入和导出。
三、环境搭建
(一)安装 Node.js 和 npm
React 开发需要依赖 Node.js 和 npm(Node Package Manager),npm 是 Node.js 的包管理工具。
-
访问 Node.js 官网(Node.js --- Run JavaScript Everywhere),下载并安装适合自己操作系统的 Node.js 版本(建议下载 LTS 版本,即长期支持版本)。
-
安装完成后,打开命令行工具(Windows 系统可使用 cmd 或 PowerShell,Mac 和 Linux 系统使用终端),输入以下命令检查是否安装成功:
node -v
npm -v
如果能显示出对应的版本号,则说明安装成功。
(二)使用 create-react-app 脚手架创建项目
create-react-app 是 React 官方提供的脚手架工具,能够快速创建一个 React 项目,并配置好开发环境、依赖项等。
-
安装 create-react-app(如果之前没有安装过),在命令行中输入:
npm install -g create-react-app
-
创建 React 项目,在命令行中进入想要创建项目的目录,然后输入:
create-react-app my-first-react-app
其中my-first-react-app是项目的名称,你可以根据自己的需求修改。
-
进入项目目录:
cd my-first-react-app
-
启动项目:
npm start
启动成功后,会自动在浏览器中打开http://localhost:3000,你将看到 React 的默认欢迎页面。
四、React 核心概念
(一)组件
组件是 React 的基本单位,分为函数组件和类组件。
-
函数组件:是一个返回 React 元素的 JavaScript 函数。
function Welcome() {
returnHello, React!
;
} -
类组件:通过继承React.Component类来定义,需要实现render()方法,该方法返回 React 元素。
import React from 'react';
class Welcome extends React.Component {
render() {
returnHello, React!
;
}
}
在实际开发中,函数组件使用更为广泛,尤其是结合 React Hooks 之后。
(二)JSX
JSX 是 React 的语法扩展,看起来像 HTML,但实际上是 JavaScript 的语法糖。它允许在 JavaScript 中编写类似 HTML 的代码,最终会被编译成普通的 JavaScript 代码。
- 语法规则:
- JSX 中的标签必须闭合,如<div></div>,单标签如<img/>。
- 类名使用className而不是class,因为class是 JavaScript 的关键字。
- 内联样式需要使用对象形式,如<div style={{color: 'red', fontSize: '16px'}}></div>。
- 可以在 JSX 中使用 JavaScript 表达式,需要用{}包裹,如<p>{2 + 3}</p>会显示 5。
-
在组件中使用:
function UserInfo(props) {
return (
);
}
(三)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>
<input
type="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) => (
<TodoItem
key={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 常用库和工具
- React Router:用于实现单页应用的路由管理,能够根据不同的 URL 显示不同的组件。
- Redux:用于管理应用的全局状态,当应用规模较大时,能够更好地组织和管理状态。
- Axios:用于发送 HTTP 请求,与后端进行数据交互。
- Create React App:前面提到的脚手架工具,简化 React 项目的创建和配置。
- 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 配合调试状态变化
- 性能分析(识别不必要的重渲染)
(三)使用方法
- 在浏览器扩展商店搜索 "React Developer Tools" 并安装
- 打开 React 应用页面,按 F12 打开开发者工具
- 切换到 "Components" 标签查看组件树,"Profiler" 标签进行性能分析
(四)实用技巧
- 点击组件可在右侧面板查看其 Props、State 和 Hooks
- 使用 "Highlight Updates" 功能标记重渲染的组件(闪烁效果)
- 性能分析时,点击 "Record" 记录操作过程,生成性能报告
十二、扩展工具推荐
除上述核心工具外,以下工具在实际开发中也频繁使用:
-
Styled Components:CSS-in-JS 解决方案,允许在 JavaScript 中编写 CSS 样式,实现组件样式封装
import styled from 'styled-components';
const Button = styled.buttoncolor: white; background: blue; padding: 8px 16px;
; -
React Query:用于管理服务器状态(如 API 数据缓存、同步、失效),简化数据获取逻辑
-
Formik + Yup:Formik 处理表单状态和提交逻辑,Yup 用于表单验证,两者结合大幅简化表单开发
-
Next.js:基于 React 的全栈框架,支持服务端渲染(SSR)、静态站点生成(SSG),优化 SEO 和首屏加载速度