react的constructor和super的具体含义和使用
1.constructor( )-----super( )的基本含义
这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法。
super( ) ——继承
在class方法中,继承是使用 extends 关键字来实现的。
子类 必须 在 constructor( )调用 super( )方法,否则新建实例时会报错。
2.super(props)------super()-----以及不写super的区别
(1).如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上;
(2).如果你在constructor中要使用this.props,就必须给super加参数:super(props);
(3).(无论有没有constructor,在render中this.props都是可以使用的,这是React自动附带的;);
(4).如果没用到constructor,是可以不写的.React会默认添加一个空的constructor。
Box.js
class Box extends Component{
constructor(){
super();
this.state = {
text: '',
id: 'q3dfa',
image: 'https://www.baidu.com/img/xinshouye_034fec51df225fe8410f36ad3f2fccf6.png'
}
}
render(){
console.log('box render');
let {text, id, image} = this.state;
return (
<div className="box">
<One path={image}/>
<Two content={text} id={id}/>
<button onClick={()=>{this.setState({id: 'fd4sd'})}}>修改</button>
<input type="text" value={text} onChange={this.inputChange.bind(this)}/>
</div>
)
// return React.createElement('div', {className: 'box'}, 'hello');
}
(2).如果你在constructor中要使用this.props,就必须给super加参数:super(props);
(3).(无论有没有constructor,在render中this.props都是可以使用的,这是React自动附带的;);
(4).如果没用到constructor,是可以不写的.React会默认添加一个空的constructor。
Box.js
react的constructor和super的具体含义和使用的更多相关文章
- react中constructor()和super()的具体含义以及如何使用
1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...
- React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- 源于react里面constructor()和super()的使用
es5里面没有继承的话 //构造函数 function People(name,age){ this.age = age; this.name = name } let p1 = new People ...
- class实现React继承以及constructor的super的问题
看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解 首先要知道一个问题 React的父子组件和组件类的继承有什么关系?答案是:没有关系 父子组件:指的得是组件标签包含关系 父子组件通过 ...
- react组件中的constructor和super小知识
react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...
- React中类定义组件constructor 和super
刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...
- class 中的 构造方法、static代码块、私有/公有/静态/实例属性、继承 ( extends、constructor、super()、static、super.prop、#prop、get、set )
part 1 /** * << class 中的 static 代码块与 super.prop 的使用 * * - ...
- React(2) --super关键字
参考:http://www.phonegap100.com/thread-4911-1-1.html Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象) ...
随机推荐
- ch8 -- useLK
useLK 光流法跟踪FAST角点 执行 ./useLK ../../data 运行程序. 光流法需要include<opencv2/video/tracking.hpp>,用到列表 ...
- 《SQL 进阶教程》 自连接分组排序:练习题1-2-2
分组排序 SELECT d1.district, d1. NAME, (SELECT COUNT(d2.price) FROM district_products d2 WHERE d2.price ...
- sweetAlert()参数配置
alertTypes = ['error', 'warning', 'info', 'success'], defaultParams = { title: '', text: '', type: n ...
- HelloSpock
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 使用C#连接 MyCat 链接串
所属专栏: mycat的安装部署以及监控和运维 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014180504/article/detai ...
- jquery——事件
绑定事件的其他方法 以及 取消绑定 事件:: <!DOCTYPE html><html lang="en"><head> <meta ch ...
- postgresql实现插入数据返回当前的主键ID
<insert id="addUser" parameterType="com.liupan.user"> <selectKey keyPro ...
- (转)yi_meng linux 下 ifcfg-eth0 配置 以及ifconfig、ifup、ifdown区别
linux 下 ifcfg-eth0 配置 以及ifconfig.ifup.ifdown区别 原文:https://www.cnblogs.com/yi-meng/p/3214471.html这3个命 ...
- 三,JVM 自带命令行工具之JMap
jmap:java内存映像工具 jmap(Memory Map for java ) 命令用于生成堆转储快照(一般被称为headdump 或dump文件) jmap命令格式:jmap [option ...
- sql 时间函数用法
v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...