JavaEE扩展知识学习----前端框架react-2

最新推荐文章于 2024-06-11 00:00:00 发布
最新推荐文章于 2024-06-11 00:00:00 发布
阅读量307 收藏
点赞数
分类专栏： JAVA进阶学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27922023/article/details/80169611
版权

组件实例的三大属性props,refs,state

因为自定义组件最常用就是第二种方式，采用ES6类语法方式

class MyComponent2 extends React.Component{
      render(){
          console.log(this)
          return <h1>ES6类语法方式自定义组件</h1>
      }
  }

上述代码中打印的this中就存在组件实例的三大属性props,refs,state。在打印的原型中我们也可以找到render方法。

组件实例的属性-props属性

  1. 每一个组件对象都会有props（properties的简写）属性。
  2. 组件标签的所有属性都保存在props属性中
  3. 内部读取某一个属性值：this.props.propertyName
  4. 作用就是通过标签属性从组件外向组件内传递数据（只读）

  5. 对props中的属性值进行类型限制和必要性限制








    class Person extends React.Component{
    render(){
    console.log(this.props)
    return (

    • 姓名：{this.props.username}
    • 性别：{this.props.age}
    • 年龄：{this.props.sex}

    )
    }
    }
    let person = {username:’张三’,age: 39,sex:’男’}
    ReactDOM.render(,document.getElementById(‘example1’))


    上述程序中就演示了如何将person传入到组件中。但是如果我们没有传入性别就默认显示男，应该怎么操作呢。

    ReactDOM.render(,document.getElementById(‘example1’))
    这就说到了当前组件的默认属性值








    class Person extends React.Component{
    render(){
    console.log(this.props)
    return (

    • 姓名：{this.props.username}
    • 性别：{this.props.sex}
    • 年龄：{this.props.age}

    )
    }
    }
    //设置组件的默认props属性值
    Person.defaultProps = {
    sex: '第三者'
    }
    let person = {username:'张三',age: 39,sex:'男'}
    ReactDOM.render(,document.getElementById('example1'))


    对传入数据进行必要性限制，








    <script type="text/babel">
 class Person extends  React.Component{
     render(){
         console.log(this.props)
         return (
             <ul>
                 <li>姓名：{this.props.username}</li>
                 <li>性别：{this.props.sex}</li>
                 <li>年龄：{this.props.age}</li>
             </ul>
         )
     }
 }
 //设置组件的默认props属性值
 Person.defaultProps = {
     sex: '第三者'
 }
 Person.propTypes  = {
     username: PropTypes.string.isRequired,
     age: PropTypes.number.isRequired,
     sex: PropTypes.string.isRequired
 };
 let person = {username:'张三',age: 39,sex:'男'}
 let person2 = {username:'李四',age: 36,sex:'男'}
 ReactDOM.render(<Person username =  {person.username} age = {person.age} />,document.getElementById('example1'))
 ReactDOM.render(<Person username =  {person2.username} age = {person2.age} />,document.getElementById('example2'))
</script>

说明：组件实例属性的必要性限制具体代码如下：

 Person.propTypes  = {
         username: PropTypes.string.isRequired,
         age: PropTypes.number.isRequired,
         sex: PropTypes.string.isRequired
     };

上述代码中因为使用了propTypes，所以就必须引入

 <script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>

当然也可以使用npm进行安装。
如果上述代码中person的属性值很多，那么如下这中传数据就显得很麻烦。没有效率，

ReactDOM.render(<Person username =  {person2.username} age = {person2.age} />,document.getElementById('example2'))

这个时候我们可以使用打包的方式，

ReactDOM.render(<Person {...person2} />,document.getElementById('example2'))

嵌套组件

1.先看实际效果

2.下图是代码结构图


从结构中我们看出这个例子包含了两个组件App和Welcome,并且是App组件包含了Welcome组件，并且Welcome组件中的数据来源遍历App组件中的属性arr数组，

3.App组件如下

 class App extends React.Component{
        render(){
            console.log(this.props.arr)
            let {arr} = this.props;
            return (
                    <div>
                        {
                            arr.map((item,index) => {
                                return <Welcome key={index} name = {item}/>
                            })
                        }

                    </div>
            )
        }
    }

4.Welcome组件如下

function Welcome(props){
        return <h2>Welcome {props.name}</h2>
    }

4.准备数据和渲染组件

 let arr = ['张三','李四','王五','赵六']
 //渲染组件
 ReactDOM.render(<App arr = {arr}/>,document.getElementById("example2"))

说明：

  1. 渲染组件只需要渲染最外部的组件App即可
  2. 外部数据传入到App组件采用props属性即可

  3. App组件遍历数组的方法，先获取数据 let {arr} = this.props;这就是Es6的对象解构赋值，props是对象，里面有一个arr结构的数据，定义一个{arr}结构来接收，对象解构赋值作用于当前作用于当前作用域。所以可以使用

    arr.map((item,index) => {
    return
    })
    当前数据在App组件中，现在要把item数据传给Welcome组件，也是使用props对象来传值，name = {item}。
    Welcome获取数据的方式

    function Welcome(props){
    return

    Welcome {props.name}


    }
    注意：首先这里不能写

    return

    Welcome {this.props.name}

    ,
    因为在工厂函数创建组件中this是undefined，解决办法就是给Welcome组件增加一个props参数，使用props.name来获取数据。

组件实例的属性-refs属性

  1. 组件内的标签可以定义refs属性来标识自己
  2. 在组件中可以通过this.refs.refName来得到对应了真实DOM对象

  3. 作用：用于操作指定的refs属性的DOM元素对象（表单标签居多），例如


    this.refs.username//返回的就是input对象

事件处理

  1. 通过onXxx属性指定组件的事件处理函数（注意大小写）

    • React使用的是自定义事件，而不是DOM事件
    • React中的事件是通过委托的方式处理（委托给组件最外层的元素）

  2. 通过event.target得到发生事件的DOM元素对象


    handleFocus(event){
    event.target //返回的是input对象
    }

例子如下

  <script type="text/babel">
      class App extends React.Component{
          handleClick(){
             let value =  this.refs.msg.value;
              alert(value);
          }
          render(){
              console.log(this)
              return (
                      <div>
                          <input ref="msg" type="text"/>
                          <button onClick={this.handleClick}>提示输入数据</button>
                          <input type="text" placeholder="失去焦点提示数据"/>
                      </div>
              )
          }
      }
      ReactDOM.render(<App/>,document.getElementById("example2"))
</script>

注意：
1. 使用onClick={this.handleClick}绑定事件
2. 定义事件

 handleClick(){
     let value =  this.refs.msg.value;
      alert(value);
  }

3. 说明：render方法中的this表示的是组件实例，但是在handleClick中this却指向null,所以上述程序就不会弹出输入框的值，这里就需要我们将handleClick中的this指向组件实例。

完整代码如下

<body>
    <div id="example2"></div>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
      class App extends React.Component{
          constructor(props){
              super(props);
              console.log(this);//this指向的就是组件的实例对象
              //修改this,找到原型上的函数，再强制绑定this
              this.handleClick = this.handleClick.bind(this);
          }
          handleClick(){
             let value =  this.refs.msg.value;
              alert(value);
          }
          handleBlue(event){
              alert(event.target.value);
          }
          render(){
              console.log(this)
              return (
                      <div>
                          <input ref="msg" type="text"/>
                          <button onClick={this.handleClick}>提示输入数据</button>
                          <input onBlur={this.handleBlue} type="text" placeholder="失去焦点提示数据"/>
                      </div>
              )
          }
      }
      ReactDOM.render(<App/>,document.getElementById("example2"))
    </script>
</body>

说明：

  1. onBlur是失去光标事件

  2. 失去光标显示当前输入框内容，由于是获取当前input的内容，所以使用

    handleBlue(event){
    alert(event.target.value);
    }
    这里不在使用ref来表示input，因为使用了ref那么就还要绑定this,event.target就表示当前DOM对象。

组件实例的属性-state属性

  1. 组件被称为‘状态机’，通过更新组件的状态值来更新对应的页面显示（重新渲染）

  2. 初始化状态

    constructor(props){
    super(props);
    this.state = {
    stateProp1 : value1,
    stateProp2 : value2
    }
    }

  3. 读取某一个状态

    this.state.statePropertyName

  4. 更新状态（组件界面更新）

    this.setState({
    stateProp1 : value1,
    stateProp2 : value2,
    })

state练习实例

分析：
1. 需求分析可以得到三个组件App组件（应用的主组件）AddTodo组件（添加todo的组件）和TodoList组件（显示todo的组件）
2. 其中App组件包含AddTodo组件和TodoList组件，AddTodo组件和TodoList组件属于并列关系，由于并列组件之间无法传递数据。
3. 所以将数据源初始化在App组件

问题：
1. 内部组件如何向外部组件传递数据

完整代码如下

<body>
    <div id="example2"></div>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
        //定义应用主组件
       class App extends React.Component{
           constructor(props){
               super(props);
               this.state = {
                   todos: ['吃饭','睡觉','打豆豆']
               };
               //更改add的this指向
               this.add = this.add.bind(this);
           }
           add(newTodo){
            console.log(newTodo);
            //更新状态
            let todos = this.state.todos;
               todos.unshift(newTodo);
               console.log(todos)
               this.setState({todos});
           }
           render(){
               let {todos} = this.state;
               return (
                       <div>
                           <h2>我是Todo列表示例</h2>
                           <AddTodo add={this.add} length={todos.length}/>
                           <TodoList todos = {todos}/>
                       </div>
               )
           }
       }
       //定义AddTodo组件
        class AddTodo extends React.Component{
           constructor(props){
               super(props);
               this.addTodo = this.addTodo.bind(this);
           }
            addTodo(){
                let newTodo = this.refs.newTodo.value;
                //将数据给App组件前先判断数据是否合法（是否为空）
                if(!newTodo.trim()){
                    alert("输入的内容不能为空！！");
                    return ;
                }
                this.props.add(newTodo)
                this.refs.newTodo.value = '';//添加后清除输出框数据
            }
           render(){
               return (
                       <div>
                           <input ref = "newTodo" type="text"/>
                           <button onClick={this.addTodo}>添加一个列表,总共{this.props.length}个列表</button>
                       </div>
               )
           }
        }
        //定义todo列表显示组件
        class TodoList extends  React.Component{
           render(){
               let {todos} = this.props;
               return(
                       <ul>
                           {
                               todos.map((item,index)=> <li key ={index}>{item}</li> )
                           }
                       </ul>
               )
           }
        }
        //渲染组件
        ReactDOM.render(<App/>,document.getElementById("example2"))
    </script>
</body>

代码分析如下

受控组件

就是通过控制组件的state来控制组件

先看一个示例

有一个输入框和一行文本，文本的值随着输入框中的值的改变而改变，代码如下

<body>
    <div id="example2"></div>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
      class App extends React.Component{
          //初始化数据
          constructor(props){
              super(props);
              this.state = {
                  msg:"我是亚历山大"
              }
              this.handleChange = this.handleChange.bind(this);
          }
          handleChange(event){
              this.setState({
                  msg: event.target.value
              });
          }
          render(){
              let {msg} = this.state;
              return (
                      <div>
                          <input onChange={this.handleChange} type="text" value={msg}/>
                          <p>{msg}</p>
                      </div>
              )
          }
      }
        ReactDOM.render(<App/>,document.getElementById("example2"))
    </script>
</body>

组件的生命周期

示例

<body>
    <div id="example2"></div>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.6.0/prop-types.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
     class LifeScyle extends React.Component{
         constructor(props){
             super(props);
             this.state = {
                 person:{
                     name:"张三",
                     age:34
                 }
             }
             console.log("我是constructor，我被调用了")
         }
         //组件将要被挂载前要执行的方法
        componentWillMount(){
             console.log("componentWillMount方法被调用，组件将要被挂载前")
            //发送ajax请求，开启定时器
            setTimeout(function(){
                this.setState ({
                    person: {
                        name:"李四",
                        age:45
                    }
                })
            }.bind(this),2000)
            setTimeout(() =>{
                this.setState ({
                    person: {
                        name:"王五",
                        age:453
                    }
                })
            },3000)
        }
        //组件挂载完毕后执行的方法
         componentDidMount(){
            console.log("componentDidMount方法被调用，组件挂载完毕后")
             //过三秒后卸载组件
             setTimeout(() =>{
                ReactDOM.unmountComponentAtNode(document.getElementById("example2"))
             },4000)
             //循环定时器
            this.intervalId =  setInterval(function(){
                 console.log("setInterval")
             },1000)
         }
         //组件将要更新的方法
         componentWillUpdate(){
             console.log("componentWillUpdate方法被调用，组件将要更新")
         }
         //组件更新完毕
         componentDidUpdate(){
             console.log("componentDidUpdate方法被调用，组件更新完毕")
         }
         //组件将要被卸载
         componentWillUnmount(){
             console.log("componentWillUnmount被调用，组件将要被卸载")
             //通常在这里做一些收尾工作，例如关闭定时器
             clearInterval(this.intervalId);
         }
         render(){
             let {person} = this.state;
             console.log("render方法被调用")
             return (
                 <div>{person.name}==========={person.age}</div>
             )
         }
     }
        ReactDOM.render(<LifeScyle/>,document.getElementById("example2"))
    </script>
</body>

输出结果为

React的生命周期小练习

显示一行文本，文本渐渐变淡，快要消失的时候，又渐渐变亮

 <script type="text/babel">
    class Animation extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                opacity : 1
            }
        }
        //开启一个循环定时器，改变opacity的值
        componentDidMount(){
            let {opacity} = this.state;
            setInterval(()=>{
                opacity -=0.05;
                console.log(opacity)
                //判断opacity的值
                if(opacity < 0.1){
                    opacity = 1;
                }
                this.setState({opacity});//opacity:opacity同名属性可以不写
            },100)
        }
        render(){
            let opacity = this.state.opacity;
            return (
                    <div style={{opacity:opacity}}>我是逸心写手，在追逐技术的道路上越走越远！！</div>
            )
        }
    }
    ReactDOM.render(<Animation/>,document.getElementById("example2"))
</script>

React中的虚拟DOM的diff算法

diff算法就是计算出页面那个局部在发生变化，React只会重绘局部变化的地方，下面举一个示例

<script type="text/babel">
  class HelloWorld extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              date: new Date()
          };
      }
      componentDidMount(){
          setInterval(()=>{
              this.setState({
                  date: new Date()
              })
          },1000)
      }
      render(){
          console.log('render');
          return (
                  <p>
                      Hello ,<input type="text" placeholder="输入你的姓名"/>，当前时间:{this.state.date.toTimeString()}
                  </p>
          )
      }
  }
    ReactDOM.render(<HelloWorld/>,document.getElementById("example2"))
</script>

结果就是

右侧的时间一直在变化，但是我们在输入框中输入时，输入框的值并不会消失，就说明，是局部重新绘制。这个就是diff算法的高效。

四川码匠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaEE E-Commerce Application.zip
12-29
10. **前端技术**：尽管JavaEE主要关注后端开发，但现代电商应用往往结合HTML、CSS和JavaScript（可能使用React、Vue或Angular等前端框架）来提供更丰富的用户体验。 综上所述，JavaEE E-Commerce Application涉及...
电商项目-JavaEE-e3mall.zip
11-06
10. **前端技术**：如HTML、CSS、JavaScript，可能还包括React、Vue.js或Angular这样的前端框架，为用户提供交互式用户体验。 11. **RESTful API**：可能设计有符合REST原则的API接口，供前后端分离架构中的移动...
React框架的介绍、特点、安装及基本使用流程
qq_56715703的博客
04-21 1万+
react是由facebook前端开发团队开发和维护的js框架react的实现功能类似VUE，但是由于国外的开发风格，导致在react上，并没有对数据渲染的步骤进行封装，需要开发者更多的使用es6的语法手动完成数据渲染，所以，代码难度比VUE高。
前端 react教程（详细版）
it_varlue的博客
04-04 1万+
前端面试 react基础教程 。 类组件与函数组件区别。state与props区别.useCallback与useMemo区别.react生命周期。 高阶组件。reactHooks
REACT (Web开发框架 : react)极速入门
最新发布
masterphp的博客
06-11 464
前面讲过了很多后端，今天复习一下前端，为啥要讲React？对咯！我这边又被借调到前端组了，和前端的同学一起做React，以前有基础加上前端同学只做过Vue，所以我毫无疑问的又被借过去了......，这个是复习资料，高级玩家可略过。首先我要说一下，有Vue框架和JS原生的同学学习React会特别的快速，所以基础稍微差一点的同学可以先复习一下JS，特别说一下是JS老生常谈的，说明一下啥是React和React的特点。
前端框架_React知识点精讲
weixin_52884694的博客
10-26 3645
❝ 当我们心情愉悦时，大脑会分泌一种叫「内啡肽」的神经递质，它能帮助我们减轻疼痛。 ❞ 大家好，我是「柒八九」。 今天，我们继续「前端面试」的知识点。我们来谈谈关于「React知识点」的相关知识点和具体的算法。 该系列的文章，大部分都是前面文章的知识点汇总，如果想具体了解相关内容，请移步相关系列，进行探讨。 如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。 文章list CSS重点概念精讲JS_基础知识点精讲网络通信_知识点精讲JS_手写实现前端工程化_知识点精讲 好了，天不早了，干
三大主流前端框架介绍及选型
brucexia的专栏
12-18 2134
React是单向响应的数据流，采用单向数据绑定，即Model（数据）的更新会触发View（页面）的更新，而View的更新不会触发Model的更新，它们的作用是单向的。Angular的模板功能强大、丰富，并且还引入了Java的一些概念，是一款大而全的框架，更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节提出了自己的一套解决方案。Angular诞生于2009年，其出现的时间要早于React和Vue，它是一款来自谷歌的开源的Web前端框架，Angular的官方网站如图2.3所示。
前端知识--React
weixin_38009285的博客
06-12 2177
react知识点记录
javaee-客户管理系统.zip
08-19
现代的JavaEE项目也可能采用前后端分离的方式，前端使用React或Vue.js等框架，后端提供RESTful API。 在开发过程中，版本控制工具如Git是必不可少的，它帮助团队协作并跟踪代码变更。持续集成/持续部署（CI/CD）...
todomvc-javaee:JavaEE培训应用-TodoMVC演示版（http
05-25
TodoMVC是一个流行的概念，它通过在不同前端框架下实现同一个简单的待办事项管理应用来展示各框架的核心功能和用法。 【描述】"todomvc-javaee"是TodoMVC项目的一个特定实现，采用JavaEE作为后端开发平台。这个项目...
ebook-shop:javaEE 第一次作业
04-08
尽管在现代JavaEE开发中，它可能不如其他前端框架（如Angular、React或Vue.js）流行，但在某些情况下，它可能会被用作ebook-shop的UI框架。 在这个"ebook-shop"作业中，学生可能需要实现上述技术的集成，创建一个...
React 框架
qq_41482600的博客
10-23 7581
CS 与 BS结合：像ReactVue此类框架，转移了部分服务器的功能到客户端。将CS和BS加以结合。客户端只用请求一次服务器，服务器就将所有js代码返回给客户端，所有交互类操作都不再依赖服务器。客户端只有在需要服务器的数据时才会使用json通信一下，其他时间都在客户端利用js操作、暂存数据这样就极大减轻了服务器压力。定义好组件之后，需要将组件渲染出来，index.js 就是所有 js 的入口， 并引入React与Component组件。// box.js 文件。
react框架菜鸟教程，前端小白必看
weixin_61857435的博客
05-29 3368
React 是一个比较流行的前端开发框架。React是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
前端（七）——React框架的定位与应用场景解析
杜永康的博客
07-17 3838
组件化开发React 推崇以组件为基础的开发方式。组件是一个独立的、可重用的模块，用于构建用户界面的一部分。React组件具有自己的状态（state）和属性（props），并通过render()方法来描述组件应该如何渲染。组件可以嵌套、组合和复用，使得代码更加模块化、可维护和扩展。虚拟DOMReact 使用虚拟DOM进行高效的渲染。虚拟DOM 是一个轻量级的 JavaScript对象树，与真实的DOM对应。
React 快速入门：掌握前端开发的核心技能
JAVA开发区的博客
04-11 1077
React的雏形在Facebook内部首次出现。由于当时Facebook的前端代码越来越复杂，开发团队感受到了传统的框架的局限性，开始探索一种更加灵活和高效的前端开发方式。所以React就出现了。
react快速开始(一)-入门基础
热门推荐
西京刀客
10-09 1万+
react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
前端框架React
Ahua_Core的博客
01-26 3452
React
前端框架 React 学习总结
qq_50909707的博客
11-17 6834
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
前端之-react框架1天梭哈
ggithub的博客
10-21 117
PS：防止CSRF（跨站请求伪造）：就是让我们的每个请求都带一个从 cookie 中拿到的 key，根据浏览器同源策略，假冒的网站是拿不到你 cookie 中的 key 的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。如果将一个纯函数作为组件，纯函数通过自身的重复执行做到渲染与重复更新，需要在函数多次执行期间保存其中的状态，那我们肯定是需要这个函数之外的空间来存储状态，并且当这个状态被改变时，能监听到并触发函数组件的重新渲染。
intra-mart WebPlatform开发指南：JavaEE模式详解
2. JavaEE框架编程是核心内容之一，开发者需要理解如何在JavaEE环境中编写和组织代码，以及文件的保存位置。 3. 文档详细讲解了intra-mart提供的Java组件集群（im-BizAPI），包括各种关键模块： - 标签库：提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值