关于react组件中的constructor和super

正片

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    // ...
  }
  // ...
}

简单来说,react 中通过继承的方式定义 class 组件时,可以缺省 constructor 构造函数,由 ES6 的继承规则得知,不管子类写不写 constructor,在 new 实例的过程都会给补上 constructor

但是如果需要定义实例的 state 状态时,则需要在 constructor 中定义,并且需要手动调用 super() 来先继承父组件的 this,然后加上自己身的实力属性和方法,才得到了自己的 this

那么 super() 中必须传入来自 constructor() 中传入的 props 形参吗?
如果需要急着在 constructor 钩子函数中就要使用组件的 this.props 属性,那么则需要像图中那样,传入 props,此时可以使用 props,也可以使用 this.props,前者可以是任意参数,后者是固定写法。否则不需要传入 props
react 在除了 constructor 之外的生命周期中已经传入了 this.props 了,正常使用即可

PS:
如果不需要 state 状态,推荐用函数式组件,而且 react 16.7.0-alpha 已经开始有了 Hooks API,使得函数式组件也可以有 state 状态了。


番外

ES7 新的提案有另一种写法,舍去 constructor 方法,直接将实例属性(比如 state)写在 class 里面,通过 babel 转义后,有同样功效(搜索下 class 实例属性 关键字了解更多)。

class MyStatement extends React.Component {
  state = {
    text: 'ok'
  }
  doSomething = () => {
  // ...
  }
  render() {
    return <div>{this.state.text}<div>
  }
}

参考

react组件中的constructor和super小知识
ES6 javascript中class静态方法、属性与实例属性用法示例

原文地址:https://www.cnblogs.com/nicholaswang/p/10437206.html

时间: 2024-10-15 20:00:56

关于react组件中的constructor和super的相关文章

规避 React 组件中的 bind(this)

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &

一些常用的方法,通过继承加入react组件中,this来调用

export const Mixin = Base => class extends Base { static contextTypes = { FH: PropTypes.func, PH: PropTypes.func, }; constructor() { super(); this.name = 'zhanglei'; this.timer = null; } debounce(callback) { if (this.timer) { clearTimeout(this.timer)

react组件的创建

最近项目接触react和rn,之前会一些vue和小程序,起初写react是很难受的,尤其是jsx的写法,不过2周过后感觉写起来有点舒服了... 目前react的组件一共有3种方式:React.createClass,React.Component,函数式 React.createClass(API已经移除) 这是早期react组件的创建方式,如果你看的文章是几年之前写的,很多都是这种方式(比如阮老师这篇React 入门实例教程) React.createClass现在这一API已经移除,如果非要

react中constructor和super()以及super(props)的区别。

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 constructor( )--构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法. super( ) --继承 在class方法中,继承是使用 extends 关键字来实现的.子类

react native 中View组件中的ref属性是什么

在用Reactnative写工程时,默认奇妙的有一种像OC中,或者Java 中或者当前类的私有属性的想法,state 和props都不能满足时,就是ref   它能达到其他语言中持有一个view组件,并且局部的刷新 ref 接受值为string类型的参数或者一个函数function callback.这一特性让开发者对ref的使用更加灵活. render() { return <TextInput ref={(c) => this._input = c} />; }, component

React组件方法中为什么要绑定this

React组件方法中为什么要绑定this 如果你尝试使用过React进行前端开发,一定见过下面这样的代码: //假想定义一个ToggleButton开关组件 class ToggleButton extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this); this.handleC

react native中有关日期的组件DatePicker 示例

1.用node加载react-native-datepicker包 npm install react-native-datepicker 2.直接上代码 import React, { PureComponent } from 'react';import DatePicker from 'react-native-datepicker'; class MyDatePicker extends PureComponent { constructor(props) { super(props);

react native中利用Picker自定义日期组件(只包含年和月)

因为业务需求,定义只包含年月的日期,react-native自带组件不符合,第三方鸡肋,于是自己写一个,安卓和IOS样式不同,自己体验调用方法示例: import PickerData from '..//Picker'; <PickerData visible={store.visibleReferee} onCancel={ () => { store.visibleReferee = false; return null; } } onRequestClose={ () => {

react 父组件调用子组件中的事件

import React, {Component} from 'react'; export default class Parent extends Component { render() { return( <div> <Child onRef={this.onRef} /> <button onClick={this.click} >click</button> </div> ) } onRef = (ref) => { this.