react中constructor和super的使用

一:什么时候要用constructor,需要定义state的时候必须要写,要调用super(),而且要传入props参数即super(props)。如果不定义state的话,有无constructor没区别。

二:什么时候要调用super,如果要在子类中使用父类的属性和方法,就要调用super(父类接受的参数),即要在constructor中使用this.props的时候就必须要调用super(props)。

例如:

constructor(){
    super();      //没有用到this.props所以参数props就可以不加
    this.state={  //定义了state必须要写constructor,必须调用super
        list:[‘aaa‘, ‘bbb‘, ‘ccc‘]
    }
}

三:可以不写constructor,但是只要写了constructor就必须要有super。为什么?这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

四:为什么可以省略,由于ES6的继承规则,不管子类写不写constructor,在new实例的过程都会自动给补上constructor。

注意:子类必须在constructor方法中调用super方法,否自新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的属性和方法。如果不调用super方法,子类就得不到this对象。

原文地址:https://www.cnblogs.com/luowenshuai/p/9457839.html

时间: 2024-08-30 15:00:03

react中constructor和super的使用的相关文章

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

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

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co

关于react组件中的constructor和super

正片 export default class Child extends React.Component { constructor(props) { super(props); // ... } // ... } 简单来说,react 中通过继承的方式定义 class 组件时,可以缺省 constructor 构造函数,由 ES6 的继承规则得知,不管子类写不写 constructor,在 new 实例的过程都会给补上 constructor. 但是如果需要定义实例的 state 状态时,则

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

React中使用Ant Table组件

一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启动,参考 三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 'react'; import ReactDOM from 'react-dom'; import ExampleTable from './Exam

react中input自动聚焦问题

input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用refs解决input聚焦的问题有两种应用场景: 1.组件内部: 在input内部定义ref,当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数.例如,下面的代码使用 ref 回调来存储 DOM 节点的引用. class CustomTextInput extend

React中this指向常用的2种修正方式

一.使用bind方法(构造函数内绑定) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三大属性之state使用</title> </head> <body> <div id="test1"></div> </body> <script src=".

React中reduxForm表单编辑

reduxForm中反写数据在输入框中,数据是从别的模块拉取 .关键代码如下 // 编辑应用表单 class EditCode extends React.Component { constructor(props) { super(props) } componentDidMount() { } // 取消编辑 handleBack=()=>{ window.history.go(-1); } // 确定编辑 handleFormSubmit=()=>{ const { handleSubm

React中的State与Props

一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.state 给组件设置一个初始的 state,在第一次 render 时就会用这个数据渲染组件 class ItemList extends React.Component { constructor() { super(); this.state = { data: '123' }; } render