zoukankan      html  css  js  c++  java
  • React: 类式组件

    1. 简介

    通过class关键字创建组件

    2. 原生JS创建类

    1. 示例代码

    展开代码
    
        // 组件名大写
        class Person {
            // 用于初始化对象
            constructor(name,age) {
                // this 指向类的实例对象
                this.name = name;
                this.age = age;
                // 该方法在类的实例对象上
                this.eat = function (){
                    console.log("吃饭了")
                }
            }
            // 该方法在类的原型对象上,供类的实例使用
            say(){
                // 方法中的this指向调用实例对象
                console.log(`我是${this.name},今年${this.age}岁`)
            }
        }
        const p1 = new Person('张三',22);
        console.log(p1)
        p1.say();
        p1.eat();
    
    class Student extends  Person{
        // 继承了父类的构造器
    
        constructor(name,age,grade) {
            // 子类若有构造器,则构造器再开始必须调用s父类构造器,super()
            super(name,age);
            this.grade = grade;
        }
        // 该方法在类的原型对象上,供类的实例使用
        say(){
            // 方法中的this指向调用实例对象
            console.log(`我是${this.name},今年${this.age}岁,正在读${this.grade}`)
        }
    }
    const s1 = new Student('李四',23,'高三');
    console.log(s1)
    s1.say();
    

    2. 总结

    1. 类名必须大写
    2. 类的构造器不是必须的,当构造示例对象时需要初始化操作时才需要写构造方法
    3. 类默认继承了父类的构造器,若子类中定义的构造器,则必须在子类的构造方法最开始显示的调用父类的构造方法
    4. 类中定义的方法都在类的原型对象上,原型对象上的方法实例可以直接使用
    5. 实例调用方法时,采取就近原则,实例自己的方法 > 原型对象的方法 > 原型链上依次向上的方法

    3. 创建React中的类式组件

    1. 示例代码

    展开代码
    
         class MyComponent extends React.Component{
             render() {
                 // this是该类的实例对象
                 console.log(this)
                 return (
                     
    类式组件
    ); } } // 将虚拟DOM转化为真实DOM /* * 1. react解析组件标签 * 2. 组件为类式组件,创建该类的实例,并调用其原型对象的render方法 * 3. 将render()返回的虚拟DOM渲染到真实DOM */ ReactDOM.render(,document.getElementById('test'))

    2. 总结

    1. 必须继承 React.Component
    2. 类中必须实现render()方法

    3.构造器

    1. 初始化对象的值
    2. 通过bind方法为实例对象添加方法,并修改方法中this的指向

    4.方法中的this

    1. 示例代码

    展开代码
    
    class MyComponent extends React.Component{
    
         constructor(pros) {
             super(pros);
             // 先从原型对象上获取到demo方法
             // 在通过bind操作重新生成了一个函数,并修改的函数的this指向
             // 再将这个新函数赋给 demo2
             this.demo2 = this.demo.bind(this)
         }
    
         demo(){
             console.log(this)
         }
    
         render() {
             // this是该类的实例对象
             console.log(this)
             return (
                 // 将demo函数作为onClick的回调,属于直接调用,而不是实例调用
                 <div> <span onClick={this.demo2}>类式组件</span> </div>
             );
         }
     }
     ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    

    2. 总结

    1. 类中的方法默认开启的局部的严格模式,相当于在方法的第一行默认添加了 'use strict'
    2. 方法由类的实例对象调用时,里面的this指向的才是类的实例对象
    3. 方法被直接调用(即不是由类的实例对象调用)时,this为undefined
      onClick=this.demo,通过这种方式将类中的demo函数作为onClick的回调,当发生onClick调用demo函数时,这种属于直接调用
    4. 在类的构造函数中通过this.demo.bind(this),通过bind可以重新生成一个函数,并修改函数内的this指向,此时再将demo函数作onClick的回调,demo函数中的this就是指向类的实例对象

    5. 类中方法的this为undefined问题

    1. 通过bind函数绑定this
      say = say.bind(this)
    2. 赋值语句 + 箭头函数
      箭头函数中没有this,这里的this为箭头函数外面的this.即组件的实例对象
      run = ()=>{...}
    如果文章对您有所帮助,可以点一下推荐哦
  • 相关阅读:
    codeforces C. Fixing Typos 解题报告
    codeforces B. The Fibonacci Segment 解题报告
    codeforces B. Color the Fence 解题报告
    codeforces B. Petya and Staircases 解题报告
    codeforces A. Sereja and Bottles 解题报告
    codeforces B. Levko and Permutation 解题报告
    codeforces B.Fence 解题报告
    tmp
    API 设计 POSIX File API
    分布式跟踪的一个流行标准是OpenTracing API,该标准的一个流行实现是Jaeger项目。
  • 原文地址:https://www.cnblogs.com/virgosnail/p/15564358.html
Copyright © 2011-2022 走看看