React学习教程，从入门到精通，React 开发环境与工具详解 —— 语法知识点、使用方法与案例代码(25）

最新推荐文章于 2025-09-29 11:13:42 发布
原创 最新推荐文章于 2025-09-29 11:13:42 发布 · 1.1k 阅读 · 28 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #学习 #前端 #javascript #vue.js #前端框架 #vue

React 开发环境与工具详解 —— 语法知识点、使用方法与案例代码

一、Node.js 环境

1.1 Node.js 环境安装

说明：Node.js 是运行 JavaScript 的服务器端环境，React 开发依赖 Node.js 和其包管理器 NPM。

✅ 安装步骤：

  1. 访问官网 https://nodejs.org
  2. 下载 LTS（长期支持版）
  3. 安装后在终端运行：
node -v
npm -v

若输出版本号（如 v18.17.0、9.6.7），说明安装成功。

1.2 最简 Web 服务（使用 Node.js 原生 http 模块）

// server.js
const http = require('http');

// 创建 HTTP 服务
const server = http.createServer((req, res) => {
  // 设置响应头：内容类型为 HTML，编码 UTF-8
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  
  // 返回 HTML 内容
  res.end(`
    <h1>🎉 最简 Node.js Web 服务</h1>
    <p>当前路径: ${req.url}</p>
    <p>请求方法: ${req.method}</p>
  `);
});

// 监听 3000 端口
server.listen(3000, () => {
  console.log('✅ 服务已启动，访问 http://localhost:3000');
});

运行命令：

node server.js

1.3 React 服务器端渲染（SSR）基础概念

说明：SSR 是在服务端生成 HTML 字符串，提升首屏加载速度和 SEO。

// ssr-server.js
const http = require('http');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 创建 React 组件
function App() {
  return React.createElement('div', null, 'Hello from React SSR!');
}

// 创建服务
const server = http.createServer((req, res) => {
  const html = ReactDOMServer.renderToString(React.createElement(App));
  
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end(`
    <!DOCTYPE html>
    <html>
      <head><title>React SSR</title></head>
      <body>
        <div id="root">${html}</div>
        <!-- 客户端激活 -->
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `);
});

server.listen(3001, () => {
  console.log('✅ SSR 服务运行在 http://localhost:3001');
});

⚠️ 需要配合 Webpack 打包客户端代码并挂载（hydrate）。

二、NPM 模块管理

2.1 NPM 模块安装

# 安装生产依赖
npm install react react-dom

# 安装开发依赖
npm install --save-dev webpack webpack-cli

# 安装全局工具（如 create-react-app）
npm install -g create-react-app

# 安装指定版本
npm install lodash@4.17.21

# 安装最新版本
npm install lodash@latest

2.2 使用 package.json

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "React 开发环境示例",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "keywords": ["react", "webpack", "npm"],
  "author": "Your Name",
  "license": "MIT"
}

常用命令：

npm init           # 初始化 package.json
npm run start      # 运行脚本
npm list --depth=0 # 查看已安装包
npm outdated       # 查看过期包
npm update         # 更新包

2.3 其他常用 NPM 命令

# 删除包
npm uninstall lodash

# 清除缓存
npm cache clean --force

# 查看包信息
npm info react

# 安装所有依赖（根据 package.json）
npm install

# 仅安装生产依赖
npm install --production

三、常用前端代码编辑器简介

推荐使用 VS Code，安装以下插件提升 React 开发体验：

  • ESLint — 代码规范检查
  • Prettier — 代码格式化
  • Reactjs Code Snippets — 快速生成组件模板
  • Auto Rename Tag — 自动重命名标签
  • Bracket Pair Colorizer — 括号配色

四、Webpack 打包工具

4.1 Webpack 介绍

Webpack 是模块打包工具，将 JS、CSS、图片等资源打包成浏览器可识别的静态资源。

4.2 Webpack 基本原理

  • 入口（Entry） → 模块依赖图 → 加载器（Loaders）处理资源 → 插件（Plugins）优化 → 输出（Output）

4.3 Webpack 使用基本概念

核心概念：
  • Entry：入口文件
  • Output：输出文件
  • Loaders：转换非 JS 文件（如 JSX、CSS）
  • Plugins：执行更广泛的任务（压缩、注入等）
  • Mode：开发/生产模式

4.4 Webpack 配置项（webpack.config.js）

// webpack.config.js
const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',

  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true, // 每次构建前清空 dist
  },

  // 开发服务器配置
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
    hot: true, // 启用热更新
  },

  // 模块加载器
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 匹配 .js 或 .jsx 文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // 从右到左执行
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 图片资源
      },
    ],
  },

  // 插件
  plugins: [],

  // 模式
  mode: 'development', // 或 'production'

  // 解析配置
  resolve: {
    extensions: ['.js', '.jsx'], // 自动补全扩展名
  },
};

4.5 几个常用插件

① HtmlWebpackPlugin（自动生成 HTML）
npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My React App',
      template: './public/index.html', // 模板
      filename: 'index.html',          // 输出文件名
    }),
  ],
};
② CleanWebpackPlugin（清理 dist）
npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};
③ MiniCssExtractPlugin（提取 CSS）
npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
};

4.6 打包成多个资源文件（多入口）

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js', // [name] 替换为入口名
  },
};

4.7 React 开发中的 Webpack

需要配置 Babel 转译 JSX 和 ES6+ 语法。

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

// .babelrc 或 babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "targets": { "browsers": ["> 1%", "last 2 versions"] } }],
    "@babel/preset-react"
  ]
}

五、Babel 工具

Babel 将 ES6+、JSX 转换为浏览器兼容的 ES5 代码。

配置文件 .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

六、模块动态加载（Code Splitting）

使用 import() 动态导入，实现按需加载。

// App.js
import React, { useState, useEffect } from 'react';

function App() {
  const [module, setModule] = useState(null);

  const loadHeavyModule = async () => {
    // 动态导入，Webpack 会自动分割代码
    const { HeavyComponent } = await import('./HeavyComponent');
    setModule(<HeavyComponent />);
  };

  return (
    <div>
      <button onClick={loadHeavyModule}>加载重型组件</button>
      <div>{module}</div>
    </div>
  );
}

export default App;

// HeavyComponent.js
import React from 'react';

// 模拟大型组件
export function HeavyComponent() {
  return <h2>🚀 我是动态加载的重型组件！</h2>;
}

构建后会生成 0.bundle.js、1.bundle.js 等按需加载文件。

七、模块热替换技术（HMR）

修改代码后无需刷新页面，局部更新组件。

配置 Webpack Dev Server

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
  },
};

在 React 中启用 HMR（使用 react-refresh）

npm install --save-dev @pmmmwh/react-refresh-webpack-plugin react-refresh

// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                'react-refresh/babel', // 启用 React 刷新
              ],
            },
          },
        ],
      },
    ],
  },
};

组件修改后自动更新，状态保留！

八、使用 Chrome 浏览器进行调试

8.1 设备类型预览

F12 → Toggle Device Toolbar（或 Ctrl+Shift+M）→ 选择设备（iPhone、iPad 等）

8.2 DOM 结构查看

Elements 面板：查看和编辑 HTML/CSS

8.3 Console 控制台

console.log('普通日志');
console.warn('警告');
console.error('错误');
console.table([{name: '张三', age: 20}, {name: '李四', age: 25}]);
console.time('计时器');
// ... 代码
console.timeEnd('计时器');

8.4 网络请求查看

Network 面板：查看 XHR/Fetch 请求、状态码、响应时间、请求头等。

8.5 页面源代码查看

Sources 面板：查看原始或打包后源码，设置断点调试。

九、React 开发工具

9.1 React 开发工具的安装

Chrome 商店搜索 “React Developer Tools” 并安装。

9.2 React 开发工具的使用

  • 查看组件树结构
  • 查看 Props / State
  • 修改状态实时生效（开发环境）
  • Profiler 性能分析

十、工程脚手架

10.1 初始工程创建

使用 Create React App（推荐新手）
npx create-react-app my-app
cd my-app
npm start
手动搭建（Webpack + Babel）
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

创建目录结构：

my-react-app/
├── src/
│   ├── index.js
│   └── App.jsx
├── public/
│   └── index.html
├── webpack.config.js
└── package.json

10.2 配置修改（以 CRA 为例）

CRA 默认隐藏 Webpack 配置，如需修改：

npm run eject  # 慎用！不可逆

或使用 craco（Create React App Configuration Override）：

npm install @craco/craco

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 修改配置
      return webpackConfig;
    },
  },
};

修改 package.json：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

✅ 综合性案例：完整 React + Webpack + HMR + 动态加载项目

项目结构

my-full-react-app/
├── src/
│   ├── index.js
│   ├── App.jsx
│   ├── Home.jsx
│   ├── About.jsx
│   └── components/
│       └── Header.jsx
├── public/
│   └── index.html
├── webpack.config.js
├── .babelrc
├── package.json
└── README.md

1. 入口文件 src/index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// 启用 HMR（模块热替换）
if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    root.render(<NextApp />);
  });
}

2. 主组件 src/App.jsx

// src/App.jsx
import React, { useState } from 'react';
import Header from './components/Header';

function App() {
  const [page, setPage] = useState('home');
  const [dynamicComponent, setDynamicComponent] = useState(null);

  const loadAbout = async () => {
    const { default: About } = await import('./About');
    setDynamicComponent(<About />);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <Header />

      <nav>
        <button onClick={() => setPage('home')}>首页</button>
        <button onClick={() => setPage('about')}>关于（静态）</button>
        <button onClick={loadAbout}>关于（动态加载）</button>
      </nav>

      <hr />

      {page === 'home' && <Home />}
      {page === 'about' && <About />}
      {dynamicComponent && (
        <div style={{ border: '2px dashed #ccc', padding: '10px', marginTop: '20px' }}>
          {dynamicComponent}
        </div>
      )}
    </div>
  );
}

export default App;

3. 首页组件 src/Home.jsx

// src/Home.jsx
import React from 'react';

export default function Home() {
  return (
    <div>
      <h2>🏠 欢迎来到首页</h2>
      <p>这是静态加载的首页组件。</p>
    </div>
  );
}

4. 关于组件 src/About.jsx

// src/About.jsx
import React from 'react';

export default function About() {
  return (
    <div>
      <h2>ℹ️ 关于我们</h2>
      <p>这个组件可以静态或动态加载。</p>
      <p>当前时间：{new Date().toLocaleTimeString()}</p>
    </div>
  );
}

5. 头部组件 src/components/Header.jsx

// src/components/Header.jsx
import React from 'react';

export default function Header() {
  return (
    <header style={{ backgroundColor: '#007acc', color: 'white', padding: '10px', marginBottom: '20px' }}>
      <h1>⚛️ React Webpack 综合项目</h1>
    </header>
  );
}

6. HTML 模板 public/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>React + Webpack 综合项目</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

7. Webpack 配置 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: [
              isDevelopment && 'react-refresh/babel',
            ].filter(Boolean),
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

8. Babel 配置 .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

9. package.json

{
  "name": "my-full-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "dev": "cross-env NODE_ENV=development webpack serve",
    "prod": "cross-env NODE_ENV=production webpack"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.0",
    "@babel/preset-env": "^7.22.0",
    "@babel/preset-react": "^7.22.0",
    "babel-loader": "^9.1.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "react-refresh": "^0.14.0"
  }
}

10. 运行项目

npm install
npm start

访问 http://localhost:3000，体验：

  • 热更新（修改组件自动刷新）
  • 动态加载（点击按钮加载组件）
  • 多页面切换

📌 本章小结

本章系统讲解了 React 开发环境的核心工具链：

  • ✅ Node.js 与 NPM：项目运行和依赖管理基础
  • ✅ Webpack：模块打包、代码分割、插件扩展
  • ✅ Babel：语法转译，支持 JSX 和 ES6+
  • ✅ HMR：开发效率神器，状态保留热更新
  • ✅ Chrome DevTools + React DevTools：调试利器
  • ✅ 工程脚手架：快速初始化项目，标准化结构

掌握这些工具，你已具备搭建现代化 React 项目的能力！

C++ 应用软件开发从入门到实战详解
dvlinker的技术专栏
06-21 5万+
本文详细介绍一下Windows平台下用C++开发应用软件的诸多内容，以供大家借鉴或参考。
React从入门到精通一
weixin_46036165的博客
10-19 724
react初始
React从入门到精通系列之(14)refs和DOM元素
weixin_33720078的博客
12-15 211
十四、refs和DOM元素 在典型的React数据流中，props是父组件与其子组件交互的唯一方式。 要修改子组件，需要使用一个新的props进行重新渲染。 但是，在某些情况下，您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例，也可以是DOM元素。 对于这两种情况，React提供了一个以下这样的功能。 通过...
REACT实战项目从0到1搭建（仅供参考）
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
React基础到进阶
最新发布
m0_63233901的博客
09-29 1318
本文全面介绍了React框架的核心概念与应用实践。从基础部分开始，详细讲解了组件化开发、JSX语法和虚拟DOM机制；在进阶内容中深入探讨了状态管理、生命周期、Hooks等关键技术；高级应用部分涵盖了路由、性能优化和React18新特性等内容。文章通过Todo应用等实际案例演示了React开发的全流程，并提供了组件设计原则、错误边界等最佳实践。React凭借其组件化、声明式编程、跨平台能力和丰富的生态系统，已成为现代Web开发的主流选择。
React 开发（一）：入门 - 从 0 到 1 的学习之旅
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-29 1314
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它提供了一种声明式编程方式，可以帮助开发者高效地构建复杂的用户界面。React 的核心思想是通过组件来组织代码，使得开发、维护和测试变得更加简单。
React核心原理与实际开发
m0_61843855的博客
10-05 1180
父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）1.props：2.消息订阅-发布：pubs-sub、event等等3.集中式管理：redux、dva等等4.conText:生产者-消费者模式父子组件：props兄弟组件：消息订阅-发布、集中式管理祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
React 入门到精通
mq962003298的博客
03-21 902
是一个用于构建用户界面的 JavaScript 库。React 有什么特点？React 的一些主要优点？1.原生JS操作DOM繁琐，效率低2.使用JS直接操作DOM,浏览器会进行大量的重绘重排3.原生JS没有组件化编码方案，代码复用低在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章。
【2024官方文档版】React快速入门
不被定义的程序媛写的博客儿
04-12 6167
偶然翻开React的官方文档。觉得蛮有意思，总觉是入了坑洋洋洒洒几千字，记录学习React的一段旅程温故而知新^皿^
深入浅出React（二）：React开发神器Webpack
天道酬勤
11-04 2606
编者按：自2013年Facebook发布以来，React吸引了越来越多的开发者，基于它的衍生技术，如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出React”系列文章，为读者剖析React开发的技术细节。 上一篇我们对React有了一个总体的认识，在介绍其中的技术细节之前，我们首先来了解一下用于React开发和模块管理的主流工具Webpack。称
React入门教程
Bupt_Lili的博客
09-19 1499
1. React的起源2. React的特点2.1 虚拟DOM2.2 组件化思想2.3 JSX语法3. 创建第一个React项目3.1 环境要求3.2 创建一个可执行的React项目4. 增加一个React组件5. React数据流5.1 组件间通信：props5.2 组件内部状态：state6. 组件的生命周期6.1 装载过程6.2 更新过程6.3 卸载过程1. React的起源  React最...
React教程（详细版）
热门推荐
Ronychen的博客
03-19 20万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
react视频教程，从入门到精通
09-05
react教程从入门到精通，初学及需要react高级的朋友都可以下载观看
React入门项目详解与开发脚本使用指南
该项目不仅展示了React框架的核心开发流程，还涵盖了从开发、测试到构建和部署的完整生命周期管理，是学习现代前端工程化实践的理想起点。以下将围绕标题、描述以及标签中提到的关键概念，深入剖析其中涉及的技术...
React应用开发入门指南与构建部署详解
...综上所述，尽管项目名称带有一定迷惑性，但其实质是一个典型的 React 前端工程项目，完整展现了从初始化、开发、测试、构建到部署的全生命周期管理，是掌握现代前端技术栈不可或缺的学习案例。
React Todo应用入门指南与开发脚本详解
该项目不仅涵盖了React的基本开发流程，还深入体现了现代前端工程化的核心理念，包括模块化开发、自动化构建、热重载、代码优化、测试集成以及配置可扩展性等关键知识点。以下将从标题、描述、标签及子文件结构等多...
React入门到精通（一）
ALLEN的博客
01-03 2147
React+Node的开发栈可以服务器端渲染，React使用的jsx语言可以支持在js中写HTML。 学习React也是这段时间的目标，所以打算写这么一个系列，供自己沉淀每天学的东西，很多都是网上的教程方法，自己组织一下语言和思路。 Hello-React GitHub上开源项目：https://github.com/facebook/react 1、什么是React?React is a
React从入门到精通
kaka的博客
09-17 683
React入门到精通
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值