resct的组件化概念及使用方法

最新推荐文章于 2024-03-23 10:02:11 发布
最新推荐文章于 2024-03-23 10:02:11 发布
阅读量529 收藏 1
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wy_so_serious/article/details/121183692
版权

React 组件介绍

目标

了解 React 组件的意义

组件

对特定功能的封装，主要用来对UI进行拆分。

内容

结构 HTML

样式 CSS

逻辑 JS

特点

  • 独立
  • 可复用
  • 可组合

分类

  • 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件
  • 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框
  • 区块组件：由基础组件组件和业务组件组合成的UI块
  • 页面组件：展示给用户的最终页面，一般就是对应一个路由规则

React组件的两种创建方式

目标

了解 React 组件的两种创建方式

  1. 使用 JS 中的函数创建组件
  2. 使用 JS 中的 class 创建组件

示例

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>react的两种组件</h1>

// 定义一个函数式组件
const Com1 = () => {
  return <div>第一个函数式组件</div>
}

// 定义一个类组件
class Com2 extends React.Component {
  render () {
    return <div>第一个类组件</div>
  }
}

const content = (
  <div>
    {title}
    {<Com1 />}
    <hr />
    {<Com2 />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

对比

  1. 类组件比较繁琐
  2. 函数式组件比较简便

目前市面上的项目中都有使用

函数式组件-使用函数创建组件

目标

掌握函数式组件的定义和使用方式

定义组件

使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件

  • 约定1：函数名首字符大写

    必须以大写字母开头**，React 据此区分组件和普通的 HTML

  • 约定2：必须有返回值

    表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

示例：

// 1. 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}

function Button() {
  return <button>按钮</button>
}

// 2.  使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件!</div>

使用组件

使用组件就像使用 HTML 标签一样。用函数名称作为组件标签名称

// 使用 双标签 渲染组件：
<Hello></Hello>

ReactDOM.render(<Hello></Hello>, root)

// 使用 单标签 渲染组件：
<Hello />
ReactDOM.render(<Hello />, root)

类组件-用class创建组件

目标

掌握类组件的基本用法

定义格式

使用 ES6 的 class 创建的组件，叫做类（class）组件

格式

// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
  // ... 
  render () {
    return 本组件的UI结构
  }
}

注意:

  1. 类名必须以大写字母开头
  2. extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
  3. 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次

示例

// 导入 React
import React from 'react'
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

使用组件

// 导入 React
import React from 'react'
import ReactDom from 'react-dom'
// 1. 定义组件
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

const content = (<div><Hello/></div>)

ReactDOM.render(content, document.getElementById('root'))

使用组件的方式与函数式组件一致：可以使用单标签和双标签

有状态组件和无状态组件

目标

理解状态的概念，理解有状态组件和无状态组件的概念

什么是状态

定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；

特点：

  • 状态能被改变，改变了之后视图会有对应的变化

作用：

  • 保存数据。例如：要循环生成一份歌曲列表，那要提前准备好歌曲数据吧
  • 为后续更新视图打下基础。如果用户点击了操作，让歌单的内容+1了，视图会自动更新（这是由react库决定的）

有状态组件和无状态组件

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

注意：2019年02月06日，rect 16.8中引入了 React Hooks，从而函数式组件也能定义自己的状态了

无状态组件的应用场景

  • 组件本身就不需要有状态。例如：渲染一段固定的内容
  • 组件本身就没有状态，可以从外部传入

小结

  1. 状态：是用来描述事物在某一时刻的形态的数据

  2. 状态的特点: 能被修改，改了之后对应的视图也能更新。

类组件的状态

目标

掌握react类组件中定义状态和渲染状态

定义状态

固定格式，使用 state = 对象 来做初始化

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}

在视图中使用

  render() {
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

事件绑定

目标

能掌握react中的事件绑定

为什么要做事件绑定

让页面有交互； 修改数据以更新视图

格式

<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 }  ></元素>

注意：React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

示例

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>react中的事件</h1>


export default class Hello extends React.Component {
  fn() {
    console.log('mouseEnter事件')
  }
  render() {
    return (
      <div
        onClick={() => console.log('click事件')}
        onMouseEnter={this.fn}
        能处理鼠标进入或者点击事件
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

注意：

  1. 事件名是小驼峰命名格式
  2. 在类中补充方法
  3. this.fn不要加括号：
    • onClick={ this.fn() } 先调用fn()，然后将fn的执行结果当做click事件的处理函数

别忘记了写this

事件对象

目标

掌握react中的获取事件对象的方法

获取事件对象

react中，通过事件处理函数的形参来获取。

示例

  handleClick(e)=> {
    e.preventDefault()
    console.log('单击事件触发了', e)
  }
	render() {
  	return (<div>
            <button onClick={(e)=>{console.log('按钮点击了', e)}}>按钮</button>
    				<a href="http://itcast.cn/" onClick={this.handleClick}>武汉黑马</a>
  			</div>)  
  }
}

小结

事件对象通过回调函数的参数来获取。

事件处理-this指向问题

目标

了解事件处理程序中this指向异常并能知道原因

问题导入

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this) // 这里的this是？
  }
  render() {
    console.log(this) // 这里的this是？
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}
  • render方法中的this指向的而是当前react组件。
  • 事件处理程序中的this指向的是undefined

分析原因

  • 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined
  • render函数是被组件实例调用的，因此render函数中的this指向当前组件
class Person(name) {
  constructor(){
    this.name = name
  }
  say() {
    console.log(this)
  }
}
let p1 = new Person('小花')
p1.say()
const t = p1.say
t()

总结：

  1. class的内部，开启了局部严格模式use strict，所以this不会指向window undefined
  2. onClick={this.fn}中，this.fn的调用并不是通过类的实例调用的，所以值是undefined

事件处理-this指向解决方案

目标

掌握常见的this指向解决方案

有三种方式

解决事件处理程序中this指向问题主要有三种方式

  1. Function.prototype.bind()
  2. 箭头函数
  3. class 的实例方法【推荐】

方式1

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => {this.handleClick()}}>点我</button>
      </div>
    )
  }
}

缺点：1，需要额外包裹一个箭头函数，影响性能， 结构不美观

方式2：使用bind

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

方式3：

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

注意：这个语法是试验性的语法，但是有babel的转义，所以没有任何问题

总结

  1. 方式3是最方便的，也是以后用的最多的方式

组件的状态-修改状态

目标

理解setState的格式，会使用setState函数来修改状态

setState

语法：this.setState({ 要修改的部分数据 })

作用：

  1.  修改 state
  2.  更新 UI

**错误示例**

state = {
  count: 0 
};

this.setState({
  count: this.state.count++
})

理解状态不可变

react核心理念之状态不可变

不要直接修改当前状态值，而是创建新的状态值。

setState的典型用法

目标

掌握setState的典型应用场景

场景

核心代码：

state = {
  name: 'jack',
  assets: [{ id: 1, name: '手机' },{ id: 2, name: '耳机' }],
  skill: ['vue', 'react'], // angular
  info: {
    age: 18,
    city: '武汉'
  }
}

render () {
    const { name, assets, skill, info } = this.state
    return (
      <div>
        <h2>姓名：{name}</h2>
        <p>
          年龄:{info.age} 城市:{info.city}
        </p>
        <h3>资产</h3>
        <ul>{assets.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
        <h3>技能</h3>
        <ul>{skill.map((item,idx) => <li key={idx}>{item}</li>)}</ul>
        <button
          onClick={() => {
            this.handleClick()
          }}>
          点我改数据
        </button>
      </div>
    )
  }

获取表单元素的值的两种思路

目标

能够了解获取表单元素的值的两种思路

问题导入

如何获取表单元素（例如输入框）?

初始代码

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>如何获取input中的值</h1>
        <p><input type="text" /></p>
        <button>点击按钮</button>
      </div>
    )
  }
}

思路

有两种思路：

  1. 直接找到表单元素进行dom操作 --> 非受控组件
  2. 将表单元素值与react的state绑定到一起，把用户的修改同步到state中。让组件受到react的控制--> 受控组件

非受控组件-ref

目标

借助于ref，使用原生DOM的方式来获取表单元素的值

ref的使用格式

步骤

  1. 导入方法。import { createRef } from 'react'
  2. 调用createRef方法创建引用，假设名为refDom。 const refDom = createRef()
  3. refDom设置给表单元素的ref属性。<input ref={refDom}/>
  4. 通过refDom.current.value来获取值。console.log(this.refDom.current.value)

内容

  • 受控组件是通过 React 组件的状态来控制表单元素的值
  • 非受控组件是通过手动操作 DOM 的方式来控制
  • 此时，需要用到一个新的概念：ref
  • ref：用来在 React 中获取 DOM 元素

示例代码

// 1. 导入方法
import { createRef } from 'react'

class Hello extends Component {
  // 2. 调用createRef方法创建引用
  txtRef = createRef()

  handleClick = () => {
    // 4. 通过.current.value来获取值
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-非受控组件-ref</h1>
         {/* 3. 设置给表单元素的ref属性 */}
        <p><input type="text" ref={this.txtRef}/></p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}

受控组件

目标

掌握使用受控组件的方式来获取表单元素的值

如何理解受控

正常情况下，表单元素input是可任意输入内容的，可以理解为input自己维护它的状态（value）

受控组件的思路：

  1. 在state中定义状态
  2. 将state中的状态与表单元素的value值绑定到一起，进而通过state中的状态来控制表单元素的值

受控组件：value值受到了react控制的表单元素

基本步骤

有两个步骤：

  1. 在state中定义状态
  2. 对表单元素做两件事
    1. 设置value为上面定义的状态
    2. 绑定onChange事件，并在回调中通过setState来修改状态值

示例

class App extends React.Component {
  state = {
    // 1. 在state中定义状态
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
  
  handleClick = （）=> {
    console.log(this.state.msg)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-受控组件</h1>
        <p>
        {/* 2. 对表单元素做两件事 */}
          	<input type="text"
							value={this.state.msg}
							onChange={this.handleChange}
						/>
        </p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}

注意

使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要操作对应的状态即可

常见的受控组件

文本框，文本域，下拉框，复选框

要点

不同类型的表单元素进行受控处理时的格式是不同的：

  1. 文本框、文本域、下拉框：value属性 + onChange事件

  2. 复选框: checked属性 + onChange事件

  3. 单选按钮组：checked属性 + onChange事件

代码示例

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    username: '',
    desc: '',
    city: '2',
    isSingle: true,
    gender: '男'
  }

  handleName = (e) => {
    this.setState({
      username: e.target.value
    })
  }

  handleDesc = (e) => {
    this.setState({
      desc: e.target.value
    })
  }

  handleCity = (e) => {
    this.setState({
      city: e.target.value
    })
  }

  handleSingle = (e) => {
    this.setState({
      isSingle: e.target.checked
    })
  }

  hGender = (e) => {
    this.setState({
      gender: e.target.value
    })
  }

  render () {
    return (
      <div>
        姓名：<input
          type="text"
          value={this.state.username}
          onChange={this.handleName}
        />
        <br />
        描述：<textarea value={this.state.desc} onChange={this.handleDesc} />
        <br />
        城市：<select value={this.state.city} onChange={this.handleCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：<input
          type="checkbox"
          checked={this.state.isSingle}
          onChange={this.handleSingle}
        />
        <br />
        <input
          type="radio"
          name="gender"
          value="男"
          checked={this.state.gender === '男'}
          onChange={this.hGender}
        />{' '}
        男
        <input
          type="radio"
          name="gender"
          value="女"
          checked={this.state.gender === '女'}
          onChange={this.hGender}
        />{' '}
        女
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

React Native 之 组件化开发
黑森林工作室
11-06 1982
React Native组件化介绍 React Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化 组件化最大的优点可以使Android和iOS能够很方便地用很少地代码使用同一套组件，增加代码的复用性 React Native的组件化很简单，基本步骤如下引用需要的库 // 引用 import React, { Component } f
React组件的生命周期 3.更新时钩子函数
qq_39165819的博客
04-13 554
该文详细介绍了React组件生命周期更新时，钩子函数的变化过程
Resct配置less
weixin_30718391的博客
11-06 158
配置less 安装less-loader yarn add less-loader 打开webpack.config.dev.js 和webpack.config.prod.js 找到test: /\.css$/, 修改为test: /\.(css|less)$/, 找到 text 字段下的 use ，给use数组在添加一个对象{ ...
React安装 环境搭建
热门推荐
不积跬步无以至千里
11-15 2万+
1.安装nodejs  首先要安装nodejs，可以直接到node官网下载安装。 安装完成后，打开cmd ，输入node -v 查看是否安装 。 npm工具也会随node一起自动安装，使用npm -v 查看。 2.安装淘宝镜像cnmp 由于npm 安装Angular CLi太慢 所以使用cnmp。 打开cmd，输入 npm instal
React-路由的使用
庚中
06-26 4703
react英文版官网: https://reacttraining.com/react-router/ 一.仿照官网来个小案例 1.安装React路由 cnpm i --save react-router-dom 2.创建一个新的router.js文件,并在App.js中导入这个路由文件 3.在router.js文件中粘贴官方的第一个路由案例; import React from "react...
React之路由
努力让自己幸运...
01-15 1万+
路由 安装 先用create-react-app生成一个react项目 进入该项目 安装包 react-router-dom 分为2种模式：hash(哈希)，browser(浏览器的那种，H5提供的API) 认识路由 路由模块，需要一个路由容器，标识着使用了那种模式的路由 import {容器} from &quot;react-router-dom&quot;; // 容器中存放的就是路由：HashRouter...
React路由基本用法
u012475786的专栏
01-28 9362
React路由基本用法 1.React Router4.0基本概述： React Router4.0（以下简称 RR4）遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（声明式编程简单来讲就是你只需要关心做什么，而无需关心如何去做，可组合性的特点。 RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有...
React_CRUD：Resct CRUD项目
02-07
React，作为Facebook推出的一款用于构建用户界面的JavaScript库，以其组件化、虚拟DOM和高效的性能深受开发者喜爱。这个项目旨在帮助开发者理解和实践如何在React中进行数据管理。 项目的核心是利用React的组件结构...
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
09-01
方法二：使用scrollIntoView方法 此方法直接调用DOM元素的`scrollIntoView()`方法，将指定元素滚动到视口可见区域。在我们的例子中，我们可以创建一个隐藏的div元素，设置其ID为`msg_end`，然后在接收到新消息时，...
Ext JS百强应用:Form验证、表单验证、表单错误提示信息位置 --第4强
agehao的专栏
06-13 1345
Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。 Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为 qtip-当鼠标移动到控件上面时显示提示 title-在浏览器的标题显示，但是测试结果是和qtip一样的 under-在控件的底下显示错误提示 s
React30天：React内容和源代码30天
02-05
30天的React :sparkles: React概论-30口大小的杂种 :sparkles: 由和撰写 :rocket: 介绍 在接下来的30天内，我们将逐步介绍与React一起使用所需的一切。 从一开始到测试和部署我们的第一个应用程序。 该存储库包含团队主持的系列文章的全部来源和内容。 :eyes: 里面有什么？ ‍:school: 如何使用这个仓库 每天都有一个完整的React应用程序，遵循与创建文章系列相同的过程。 大多数日子都可以使用相同的基本步骤来运行（对于那些需要做更多工作的日子，请查看博客上的教程系列）。 运行任何30天的React项目的步骤是： 我们可以使用以下命令运行这些步骤： # install the dependenci
30天React时间：React 30 Days挑战是逐步指南，旨在在30天内学习React。 它需要HTML，CSS和JavaScript知识。 在开始React之前，您应该对JavaScript感到满意。 如果您不喜欢JavaScript，请查看30DaysOfJavaScript。 这是JS 30天的延续。 根据您自己的进度，此挑战可能需要长达100天的时间
02-26
30天的React 作者： 2020年10月 ＃ 天 主题 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18岁 19 20 21 22 23 24 25 26 27 28 29 30 :orange_heart: :orange_heart: :orange_heart: 快乐编码 :orange_heart: :orange_heart: :orange_heart: 支持作者创作更多的教育资料 介绍 祝贺您决定参加30天的React编程挑战赛。 在这个挑战中，您将学习开发React应用程序所需的一切。 挑战结束时，您将获得30DaysOfReact编程挑战完成证书。 如果您需要帮助或想要帮助他人，可以加入。 30DaysOfReact挑战是面向初学者以及高级JavaScript和React开发人员的指南。 欢迎来到30天的React。 React是一个JavaScript库。 我喜欢使用和教React，也希望您也能这样做。 在这一分步30天的React挑
React中ref的理解
逆袭的菜鸟X
01-21 1万+
####(1)React的ref有3种用法： 字符串 dom节点上使用，通过this.refs[refName]来引用真实的dom节点 <input ref="inputRef" /> //this.refs['inputRef']来访问 回调函数 React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。 当给 HTML 元素......
React 中ref的几种用法
zhang_xin_new的博客
06-11 1万+
React 中ref的几种用法 1.字符串 通过 this.refs.a 来引用真实dom的节点 dom 节点上使用 <input type ="text" ref="a"/> 2.回调函数 回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的， 都是获取其引用。 <input type="text" ref={(in...
探索30 Days of React：快速进阶前端开发的实践指南
最新发布
gitblog_00068的博客
03-23 393
探索30 Days of React：快速进阶前端开发的实践指南 去发现同类优质开源项目:https://gitcode.com/ 在这个数字化的时代，前端开发者需要不断更新技能以适应快速发展的Web技术。如果你正在寻找一个系统性的React学习路径，那么项目将是一个不可多得的资源。这个开源项目提供了一个为期30天的学习计划，涵盖了React的基础到高级知识，旨在帮助你快速提升React开发能力。...
React从入门到精通
weixin_44361375的博客
11-17 455
React从入门到精通
30天入坑React ---------------day04 Complex Components
小李科技
10-10 309
这篇文章是30天React系列的一部分 。 在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！ 下载免费的PDF 复杂组件 在Github上编辑此页面 太棒了，我们已经建立了我们的第一个组件。现在让我们有点发烧友，开始构建一个更复杂的界面。 在30天React的前一节中，我们开始构建...
30天入坑React ---------------day08 PropTypes
小李科技
10-15 286
这篇文章是30天React系列的一部分 。 在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！ 下载免费的PDF 使用它来定义组件的prop应该是什么类型。我们可以使用propTypesES6类风格的React prop中的方法来定义它们： 作用:如果不按照规定的类型写,浏览器会爆出警告...
30天入坑React ---------------day09 Style
小李科技
10-15 281
这篇文章是30天React系列的一部分 。 在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！ 下载免费的PDF 样式 在Github上编辑此页面 没有风格，没有应用是完整的。我们将看看我们可以用来设计组件样式的不同方法，从传统的CSS到内联样式。 通过这一点，除了将Cascadin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值