跳到主要内容

constructor

2024年03月06日
柏拉文
越努力，越幸运

一、认识​

constructor 在类组件创建实例时调用，而且初始化的时候执行一次，所以可以在 constructor 做一些初始化的工作

二、语法​

constructor(props){
    super(props)        // 执行 super ，别忘了传递props,才能在接下来的上下文中，获取到props。
    this.state={       //① 可以用来初始化state，比如可以用来获取路由中的
        name:'alien'
    }
}

三、场景​

  • 初始化 state ，比如可以用来截取路由中的参数，赋值给 state 。

  • 对类组件的事件做一些处理，比如绑定 this ， 节流，防抖等。

  • 对类组件进行一些必要生命周期的劫持，渲染劫持，这个功能更适合反向继承的HOC ，在 HOC 环节，会详细讲解反向继承这种模式。

四、问题​

4.1 super() 和 super(props) 有什么区别?​

super() 关键字实现调用父类组件, super 代替的是父类组件的 constructor, 也就是 super() === 父组件 constructor()。**super**的作用就是将父类中的 this 继承给子类。 如果在子类中不使用 super 关键字, 子类就得不到 this。因为子类没有自己的 this 对象, 它只能继承父类的 this 对象, 然后对其进行加工。所以在 constructor 中, 必须先调用 super 才能用 this。

在调用 super 过程，无论是否传入 props，React 内部都会将 porps 赋值给组件实例 porps 属性中, 如果只调用了 super()，那么 this.props 在 super() 和构造函数结束之间仍是 undefined。也就是说, super() 相比于 super(props), 在 constructor 访问 this.props 为 undefined。