React组件

已于 2023-01-10 17:52:36 修改
阅读量1.5k 收藏 5
点赞数
文章标签： react.js javascript 前端
于 2023-01-06 17:47:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy99csdn/article/details/128580842
版权

React组件

1.组件基本介绍

  • 组件是React中最基本的内容，使用React就是在使用组件
  • 组件表示页面中的部分功能
  • 多个组件可以实现完整的页面功能
  • 组件特点：可复用，独立，可组合
    在这里插入图片描述

2.React创建组件的两种方式

2.1 函数组件

函数组件：使用JS的函数或者箭头函数创建的组件

  • 为了区分普通标签，函数组件的名称必须大写字母开头
  • 函数组件必须有返回值，表示该组件的结构
  • 如果返回值为null,表示不渲染任何内容

使用函数创建组件

function Hello () {
    return (
    	<div>这是我的函数组件</div>
    )
}

使用箭头函数创建组件

const Hello = () => <div>这是一个函数组件</div>

使用组件

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

例子：
01-函数组件-基本使用

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

/* 
  1. 通过函数创建一个组件即可
    1. 组件的名字必须是大写开头  为了区分html原有的标签
    2. 组件必须返回一段结构
    3. 如果组件不想渲染任何的内容  也需要return null
*/
function Hello() {
  return <div>我是hello组件</div>
}

const element = (
  <div>
    <h1>函数组件</h1>
    {/* 使用组件 */}
    <Hello></Hello>
    <Hello></Hello>
  </div>
)

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

02-函数组件-箭头函数

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

const Hello = () =><div>我是Hello组件</div>
const element = (
  <div>
    <h1>函数组件</h1>
    {/* 使用组件 */}
    <Hello></Hello>
    <Hello></Hello>
  </div>
)

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

在这里插入图片描述

2.2 类与继承

2.2.1 class 基本语法

  • 在 ES6 之前通过构造函数创建对象
  • 在 ES6 中新增了一个关键字 class,类 和构造函数类似，用于创建对象
    -类与对象的区别
    -类：指的是一类的事物，是个概念，比如车 手机 水杯等
    -对象：一个具体的事物，有具体的特征和行为，比如一个手机，我的手机等， 类可以创建出来对象。
  • 类创建对象的基本语法
    -基本语法class 类名{}
    -构造函数constructor的用法，创建对象
    -在类中提供方法，直接提供即可
    -在类中不需要使用,分隔
/* class 类  extends 继承 */
// function Teacher(name, age) {
//   this.name = name
//   this.age = age
// }

// Teacher.prototype.sayHi = function () {
//   console.log('大家好，我是' + this.name)
// }

// const stu = new Teacher('松哥', 29)
// console.log(stu)
// stu.sayHi()

// class是一个语法糖
class Teacher {
  // 构造函数
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  sayHi() {
    console.log('大家好，我是' + this.name)
  }

  sing() {
    console.log('能够唱歌')
  }
}

const stu = new Teacher('松哥', 29)
console.log(stu)
stu.sing()

在这里插入图片描述

2.2.2 extends 实现继承

  • extends 基本使用
  • 类可以使用它继承的类中所有的成员（属性和方法）
  • 类中可以提供自己的属性和方法
  • 注意：如果想要给类中新增属性，必须先调用 super 方法
/* 
  Person  人

  Chinese 中国人
  African 非洲人
*/
class Person {
  constructor(name, gender) {
    this.name = name
    this.gender = gender
  }

  eat() {
    console.log('都会吃')
  }
}

class Chinese extends Person {
  constructor(name, gender) {
    // 父类的构造函数
    super(name, gender)
    this.skin = 'yellow'
  }
  pingpong() {
    console.log('打乒乓球')
  }
}

const c1 = new Chinese('姚明', 40)
console.log(c1)
c1.eat()
c1.pingpong()

class African extends Person {
  constructor(name, gender) {
    super(name, gender)
    this.skin = 'black'
  }
  run() {
    console.log('跑的贼快')
  }
}

const xh = new African('小黑', 30)
console.log(xh)

在这里插入图片描述

2.3 将组件提取到单独的js文件中

项目中的组件多了之后，该如何组织这些组件呢？

  • 选择一：将所有组件放在同一个JS文件中
  • 选择二：将每个组件放到单独的JS文件中
  • 组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中

实现方式

  1. 创建Hello.js

  2. 创建组件（函数 或 类）

  3. 在 Hello.js 中导出该组件

  4. 在 index.js 中导入 Hello 组件

  5. 渲染组件，

05-类组件的语法

import { Component } from 'react'
import ReactDOM from 'react-dom'

/* 
  1. 类组件必须继承React.Component
  2. 必须提供render方法
  3. render方法必须由返回值，需要返回一段结构
*/
class Hello extends Component {
  render() {
    return <div>我是hello组件</div>
  }
}

const element = (
  <div>
    <h1>类组件</h1>
    <Hello></Hello>
    <Hello></Hello>
  </div>
)

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

在这里插入图片描述
06-把组件抽取到独立的js中
在这里插入图片描述

Demo

const Demo = () => <div>我是一个函数组件</div>
export default Demo

Hello

import { Component } from 'react'

class Hello extends Component {
  render() {
    return <div>我是一个Hello组件</div>
  }
}
export default Hello

index

import ReactDOM from 'react-dom'
import Hello from './components/Hello.jsx'
import Demo from './components/Demo.jsx'

const element = (
  <div>
    <h1>类组件</h1>
    <Hello></Hello>
    <Demo></Demo>
  </div>
)

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

在这里插入图片描述

2.4 有状态组件和无状态组件

  • 函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提：基于hooks之前说的】
  • 类组件又叫做有状态组件 类组件可以自己提供数据，，，，组件内部的状态（数据如果发生了改变，内容会自动的更新）数据驱动视图
  • 状态（state）即组件的私有数据，当组件的状态发生了改变，页面结构也就发生了改变。
  • 函数组件是没有状态的，只负责页面的展示（静态，不会发生变化）性能比较高
  • 类组件有自己的状态，负责更新UI，只要类组件的数据发生了改变，UI就会发生更新。
  • 在复杂的项目中，一般都是由函数组件和类组件共同配合来完成的。【增加了使用者的负担，所以后来有了hooks】

比如计数器案例，点击按钮让数值+1， 0和1就是不同时刻的状态，当状态从0变成1之后，UI也要跟着发生变化。React想要实现这种功能，就需要使用有状态组件来完成。
在这里插入图片描述

2.5 类组件的状态

  • 状态state即数据，是组件内部的私有数据,只有在组件内部可以使用
  • state的值是一个对象,表示一个组件中可以有多个数据
  • state的基本使用

07-类组件提供状态

import { Component } from 'react'
import ReactDOM from 'react-dom'

/* 
  给类组件提供状态
*/
class App extends Component {
  constructor() {
    super()
    // 给this增加一个属性 state
    this.state = {
      msg: 'hello',
      count: 0,
    }
  }
  render() {
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.msg}</div>
        <div>{this.state.count}</div>
      </div>
    )
  }
}

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

在这里插入图片描述
09-类组件-提供状态简写

import { Component } from 'react'
import ReactDOM from 'react-dom'

/* 
  给类组件提供状态
*/
class App extends Component {
  // constructor() {
  //   super()
  //   // 给this增加一个属性 state
  //   this.state = {
  //     msg: 'hello',
  //     count: 0,
  //   }
  // }
  state = {
    msg: 'hello',
    count: 0,
  }
  render() {
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.msg}</div>
        <div>{this.state.count}</div>
        <button>+1</button>
      </div>
    )
  }
}

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

在这里插入图片描述

3 事件处理

3.1 注册事件

React注册事件与DOM的事件语法非常像
语法on+事件名=｛事件处理程序｝ 比如onClick={this.handleClick}
注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }

  handleClick() {
    console.log('点击事件触发了')
  }
}

3.2 事件对象

可以通过事件处理程序的参数获取到事件对象

function handleClick(e) {
    e.preventDefault()
    console.log('事件对象', e)
}
<a onClick={this.handleClick}>点我，不会跳转页面</a>

3.3 指向问题

事件处理程序中的this指向的是undefined

render方法中的this指向的而是当前react组件。只有事件处理程序中的this有问题

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

例子：
10-类组件-注册事件的基本使用

import { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
  state = {
    count: 0,
  }

  render() {
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.count}</div>
        <button onClick={this.clickFn} onMouseEnter={this.mouseFn}>
          +1
        </button>
        <a href="http://www.baidu.com" onClick={this.clickFn}>
          百度一下
        </a>
      </div>
    )
  }

  clickFn(e) {
    //e.preventDefault()会阻止表单提交的时候 重新加载页面。
    e.preventDefault()
    //e.stopPropagation()阻止事件冒泡。
    e.stopPropagation()
    console.log('点击事件')
  }
  mouseFn() {
    console.log('鼠标进入事件')
  }
}

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

在这里插入图片描述
在这里插入图片描述
11-类组件-事件中的this问题

import { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
  state = {
    count: 0,
  }

  render() {
    console.log('render', this)
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.count}</div>
        <button onClick={this.clickFn}>+1</button>
      </div>
    )
  }

  clickFn() {
    console.log(this)
    console.log('点击事件')
    console.log(this.state.count)
  }
}

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

在这里插入图片描述
在这里插入图片描述

3.4 this指向问题解决方案

3.4.1 在render中使用箭头函数

箭头函数的特点：自身没有this，访问的是外部的this
方式1：

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

缺点：会把大量的js处理逻辑放到JSX中，将来不容易维护
方式2

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

缺点：把大量的js逻辑写在了JSX结构中，不好维护

3.4.2 bind修改this指向

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>
    )
  }
}

或者

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

3.4.3 class实例方法

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的转义，所以没有任何问题

例子：

import { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  state = {
    count: 0,
  }

  // 在类组件中render的this不会有问题，，，this就指向当前组件

  // 解决react类组件中注册事件的this问题
  // 1. 把函数调用包裹在箭头函数中
  //      原本写法： onClick={this.clickFn}
  //      写法       onClick={() => this.clickFn()}

  // 2. 使用bind修改this的指向
  //          onClick={this.clickFn}
  //      bind优化   onClick={this.clickFn.bind(this)}

  // 3. class新语法： 类实例语法
  //      onClick={this.clickFn}
  //     把方法写法修改一下   clickFn = () => { console.log(this)  }
  render() {
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.count}</div>
        <button onClick={this.clickFn}>+1</button>
      </div>
    )
  }
  clickFn = () => {
    console.log('123', this)
  }
}

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

在这里插入图片描述
在这里插入图片描述

4 setState修改状态

  • 组件中的状态是可变的

  • 语法this.setState({要修改的数据})

  • 注意：不要直接修改state中的值，必须通过this.setState()方法进行修改

  • setState的作用

    • 修改state
    • 更新UI

  • 思想：数据驱动视图

import { Component } from 'react'
import ReactDOM from 'react-dom'

/* 
  给类组件提供状态
*/
class App extends Component {
  state = {
    count: 0,
    list: ['张三', '李四', '王五'],
  }
  render() {
    return (
      <div>
        <h1>我是根组件</h1>
        <div>{this.state.count}</div>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.clickFn}>+1</button>
        <button onClick={this.add}>增加数据</button>
      </div>
    )
  }
  /* 
    vue：
      vue会通过es5的语法Object.defineProperty()  vue3.0 会通过es6的proxy语法 监测到数据的改变，，，当数据改变的时候，vue会帮助我们自动更新DOM
      使用vue的时候，只需要直接修改数据即可。
      
    react: 
      react并不会去监听数据的变化，，，所以直接修改数据，react不知道。DOM就不会自动更新。
      react提供了一个方法，，，setState
      这个方法有两个作用：1.修改state的值 2. 更新DOM
    
    结论：
      1. react中不能直接修改state中的数据
      2. react中必须使用setState去修改数据。
  
  */
  clickFn = () => {
    // console.log(this.state.count)
    // this.state.count++
    // console.log(this.state.count)

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

  add = () => {
    this.setState({
      list: [...this.state.list, '赵六'],
    })
  }
}

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

在这里插入图片描述

4.1 react中核心理念：状态不可变

  • 不要直接修改react中state的值，而是提供新的值
  • 直接修改react中state的值，组件并不会更新

5.表单处理

我们在开发过程中，经常需要操作表单元素，比如获取表单的值或者是设置表单的值。

react中处理表单元素有两种方式：

  • 受控组件
  • 非受控组件（DOM操作）

5.1 受控组件基本概念

  • HTML中表单元素是可输入的，即表单用户并维护着自己的可变状态（value）。

  • 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。

  • React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值

  • 受控组件：value值受到了react控制的表单元素
    在这里插入图片描述

5.2 受控组件使用步骤

  1. 在state中添加一个状态，作为表单元素的value值（控制表单元素的值）
  2. 给表单元素添加change事件，设置state的值为表单元素的值（控制值的变化）
class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}
greyKing666
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React组件和生命周期
2401_84097696的博客
05-06 572
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
零基础入门一文带你了解前端React中组件的使用
hdakj22的博客
08-03 798
React 组件介绍、创建React组件的两种方式、React 事件处理：事件绑定、事件对象、有状态组件与无状态组件：state的基本使用、setState() 修改状态、事件绑定 this 指向、表单处理：受控组件和非受控组件
React入门五：事件处理
qq_39008205的博客
07-13 397
这里写目录标题1. 事件绑定2. 事件对象3. 有状态组件和无状态组件4. 组件中的state 和setState()4.1 state的使用4.2 setState()修改状态4.3 从JSX中抽离事件处理程序5. 事件绑定this指向5.1 箭头函数5.2 Function.prototype.bind()5.3 class的实例方法 （推荐使用）6. 表单处理6.1 受控组件6.2 非受控组件 1. 事件绑定 React事件绑定语法与DOM事件语法相似 如法：on+事件名称 = {事件处理程序}
16 个非常有用的 React 组件库
程序员成长指北
02-06 212
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群喜欢就关注我们吧作为一个有实力的React开发人员，仅仅了解React是不够的。本文总结了一些最有用的React组件库，可帮助你提高开发效率。这些组件包括使用表单，图表，日历，表格，用户引导、弹出窗口，颜色，动画，音乐，图像等等非常多的内容。1. react-hook-form这是一个React...
react-组件基础
ioncannontic的博客
02-27 1207
react-组件基础
React 组件的三种方式 详解
Dark_programmer的博客
03-03 2341
React 组件 关于创建项目，可以选择手动创建和通过脚手架来创建。这里给一个传送门 → 通过React 脚手架创建项目 我们先来编写第一个 react 程序 // 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React import React from 'rea...
React的组件简述
xihuhu的博客
11-06 436
1.React的组件介绍 React组件时对特定的功能进行封装，主要用与对ui进行拆分，它有着独立，可复用，可组合的特点；主要的分为4大类：1.基础组件：指input和button这种基础标签，以及antd封装过的通用组件 2.业务：组件：由基础组件合成的业务抽象化UI。例如：包含了A公司所有部门信息的下拉框。3.区块组件：由基础组件和业务组件组合成的ui块。4.页面组件：展示给用户的最终页面，一般就是对应一个路由规则。 2.React组件的创建方式 React提供两种创建方式分别是：js中的函数创
将SVG转换为React组件:lion:-React开发
05-27
将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲npx @ svgr / cli支持SVGR SVGR是MIT许可的开源项目。 这是将SVG转换为React组件online在线尝试！ 在React Europe上观看演讲SVGR将SVG转换为可立即...
react-React组件脚手架可以调试打包发布单个React组件
08-15
总之，“react-component-starter-master”提供了React组件开发所需的基本结构和工具，简化了开发流程，使开发者可以专注于编写高质量的React组件，而无需关心底层配置。无论你是初学者还是经验丰富的开发者，这个...
angular-react：在Angular中使用React组件
01-31
轻量级的Angular组件包装器通过常见的Angular组件（在许多情况下包括命令式和声明性语法）公开了Fabric React组件API。 快速链接 | | | | 典型用例 在Angular中使用React组件库 逐步将Angular应用程序重
一个简单的React组件的示例脚本，它使用了函数组件（Functional Component）和Hooks
最新发布
06-11
一个简单的React组件的示例脚本，它使用了函数组件（Functional Component）和Hooks 这个脚本定义了一个名为MyComponent的React函数组件。它使用useState Hook来管理一个名为count的状态变量，以及一个handleClick...
react-websocket:用于 websocket 通信的易于使用的 React 组件
07-23
react-websocket是一个易于使用的 React 组件，用于 websocket 通信。 把招工广告 这里的事情进展得很慢，因为我目前还有很多其他事情要处理，所以如果我没有回答你的问题或者 PR 有几天或几周没有审核，请不要生气...
react 组件 规范
06-11
开发react组件过程中，需要遵循一定的规范，否则，组件格式不一致，会导致混乱
vue-react：在Vue应用程序中将React组件用作Vue组件
02-04
vue-react是Vue.js的插件，它使您可以像使用Vue组件一样使用React组件。 安装 npm npm install vue-react --save 如果尚未安装，请安装react和react-dom软件包。 还安装babel插件。 npm install react react-dom ...
React 组件生命周期
12-13
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： ...
移动端 React 组件库
04-15
京东风格的轻量级移动端 React 组件库
React 组件（函数组件，类组件）
weixin_55683934的博客
05-24 171
作用: 创建对象，等同于构造函数。类与对象：是指一类事物，比如程序员，指的是一类群体。对象是指具体的事物。前端开发，是程序员这类人中的一种。后台开发，也是程序员的一种。举例，使用FrontEnd与BackEnd，继承Programmaer。总结。
推荐项目：React-Signup-Form - 简单易用的React注册表单组件
gitblog_00007的博客
04-27 386
推荐项目：React-Signup-Form - 简单易用的React注册表单组件 项目地址:https://gitcode.com/mikepro4/react-signup-form 项目简介 React-Signup-Form 是一个专为React应用程序设计的轻量级、高度可定制的注册表单组件。它允许开发者快速集成用户注册功能，并通过自定义样式和验证规则满足各种项目需求。 技术分析 1. 基...
07、react 组件注册
m0_45382009的博客
02-14 934
// 注册组件！ // 分类： // 构造函数式组件！ /* function 组件名(){ return JSX } let 组件名 = ()=>(JSX) */ // 类组件！ /* class .
react 组件传值
10-18
React组件之间的传值有多种方式，常见的有以下几种： 1. 父组件向子组件传值：通过props属性传递数据，父组件将数据作为props属性传递给子组件，子组件通过this.props获取数据。 2. 子组件向父组件传值：通过回调函数的方式，父组件将一个函数作为props属性传递给子组件，子组件在需要向父组件传值时，调用该函数并传递数据。 3. 兄弟组件之间传值：通过共同的父组件作为中介，将数据作为props属性传递给父组件，再由父组件将数据传递给另一个子组件。 4. 跨级组件传值：通过React.createContext创建一个上下文对象，将数据存储在上下文对象中，然后在需要使用数据的组件中通过Consumer组件获取数据。 以上是React组件传值的常见方式，不同的场景可以选择不同的方式来传递数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值