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 = ()=>{...}