class实现React继承以及constructor的super的问题

看这篇文章之前建议先看看阮一峰的Class继承便于更好的理解

首先要知道一个问题

React的父子组件和组件类的继承有什么关系？答案是：没有关系

父子组件：指的得是组件标签包含关系父子组件通过这种关系实现组件通信

组件继承：通过class实现继承关系

es6中class实现的继承

class Father {

      constructor() {

        this.name = 'zhangsan'

      }

      getDate = (data) => {

        this.haha() //因为继承关系 所以这个this也指向子组件实例 所以可调用子组件的方法

      }

      getName() {

        console.log('父组件的name')

      }

    }

class Son extends Father {//extends相当于继承了父组件的所有属性和方法

      constructor(props) {

        super(props)

        console.log("this", this)

      }

      haha = () => {

        console.log('子组件的哈哈')

      }

      getName = () => {

        super.getName();//如果不希望自己的getName覆盖父亲组件的getName

        console.log('子组件的name')

      }

    }

    let son = new Son();

    console.log('son 实例', son)

    son.getDate() //子组件的哈哈

    son.getName() //父组件的name 子组件的name

看到上面的代码会发现：

说明Es6里类里面的this 指向实例对象new Son()

那么问题来啦，请问react组件Son里面的this也是完全等价于实例对象new Son()吗？答案是否：react组件里this=new Son()实例+React包装

Button父组件：用来给子组件传递props

import React from 'react';

import Son from './son';

function Button() {

return <div>

<Son name='sun sun sun' /> {/*子组件等价于new Son()+react包裹 */}

</div>

}

export default Button;

Father父组件

import React from 'react';

class Father extends React.Component {

  constructor(props) {

    super(props)

    this.moduleName = 'moduleName';

  }

  getDate = () => {

    this.haha()

  }

  getName() { //不能用做箭头函数 如果是箭头函数则会报错 因为自组件的方法中super.getName()中的super指向的是Father类 如果是箭头函数 指向的是Son的实例对象

    console.log('父组件的name')

  }

  render() {

    return 'father'

  }

}

export default Father

Son子组件

class Son extends Father{

constructor(props) {

    super(props);

    console.log("this", this)

  }

  haha = () => {

    console.log('子组件的哈哈')

  }

  getName = () => {

    super.getName();

    console.log('子组件的name')

  }

  render() {

    return <div>

      <button onClick={this.getName}>点击获取name</button>

      <button onClick={this.getDate}>点击获取父亲组件的getDate方法</button>

    </div>

  }

}

let son = new Son('我是Son的实例参数') //子组件的哈哈

console.log('Son的实例', son) //父组件的name 子组件的name

son.getName()

son.getDate()

export default Son

所以说：react中的this 等价于 new Son()+React内部方法的集合

那么问题来啦，组件的constructor方法必须要写吗？ super必须要加吗？super里面的参数必须要写吗？

1.组件的constructor方法必须要写吗

如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。

class ColorPoint extends Point {

}

// 等同于

class ColorPoint extends Point {

  constructor(...args) {

    super(...args);

  }

}

// 可见没有写constructor，在执行过程中会自动补上

2.如果constructor()方法定义啦 isuper必须要加吗？答案是：必须要加

3.super()里面的参数必须要写吗？答案是：可写可不写如果想要在constructor()里面使用this.props 则需要传递参数

如果子类super() 不传递props/或者传递props

 constructor(props) {

    super();

    console.log("子类this.props", this.props)

  }

父亲类别

constructor() {

    super()

    console.log("父类this.props", this.props)

  }

如果子类super()传递props

 constructor(props) {

    super(props);

    console.log("子类this.props", this.props)

  }

父类super()传递props

 constructor(props) {

    super(props)

    console.log("父类this.props", this.props)

  }

总结：因为父组件也是继承于 React.Component 所以要想在当前组件里在constructor()里使用this.props 则需要给他的每一层的父组件的super里面加props才能生效值

巴特西

class实现React继承以及constructor的super的问题

最新文章

热门文章