React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下。下面这段代码是用了将生命周期方法添加到类中实现时钟效果。
// 将生命周期方法添加到类中
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};//初始化
}
//开始
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
//销毁
componentWillUnmount() {
clearInterval(this.timerID);
}
//重新改变date值
tick() {
this.setState({
date: new Date()
});
}
//注册组件
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
//····································
//挂载到实例
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
好,下面我们就再写一段原生js实现上述效果,对比一下。
function timejs () {
this.timer = null;
var time1= new Date();
var time2=time1.toLocaleTimeString()
document.getElementById(“time”).innerHTML = time2 //这里的id为time我这里没写,自己写上即可
}
var timer=setInterval(timejs,1000);
嗯,我们可以看到原生js代码量比React少得多。
下面我们为了方便起见。将React中的代码写为A,将原生JS中的代码写为B。
B中的timejs()相当于A中的tick(),不同的是A需要初始化,所以A中有 this.state = {date: new Date()};
这时你会发现super(props)是什么鬼?我注释掉行不行?答案是不行的。你会看到下面这段鲜红的BUG。
错误的含义是this之前不能没有super(props)
那么super到底是什么呢
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119882639
React关于constructor与super(props)之间的相爱相杀的更多相关文章
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- react中constructor()和super()的具体含义以及如何使用
1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...
- react的constructor和super的具体含义和使用
1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...
- 源于react里面constructor()和super()的使用
es5里面没有继承的话 //构造函数 function People(name,age){ this.age = age; this.name = name } let p1 = new People ...
- 为什么react的组件要super(props)
https://segmentfault.com/q/1010000008340434
- react组件中的constructor和super小知识
react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...
- react的super(props)
在学习react的时候,其中在构造函数里面,有一个super(props),具体是什么意思呢. 其中 super语法来自es6,其语法如下: super([arguments]); // 调用 父对象 ...
- React中类定义组件constructor 和super
刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...
- React中super(props)和super()以及不写super()的区别
一.constructor()和super()的基本含义 constructor() -- 构造方法 这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...
随机推荐
- Java学习day31
同步方法的机制:synchronized,包括synchronized方法和synchronized块 同步方法:public synchronized void method(int args){ ...
- 将mysql主从复制由ABB模式修改为ABC模式
最近遇到一个奇葩的需求,需要将mysql的主从复制模式由ABB修改为ABC,恰好这个mysql集群没有开启GTID,当时是在B上做了一次全量备份,然后使用该全量备份恢复C的方式进行的.做完之后在想有没 ...
- 一篇文章带你搞懂InnoDB的索引|结合样例
关注公众号[程序员白泽],带你走进一个不一样的程序员/学生党 前言 前阵子面试的时候,在第三面问到了MySQL索引相关的知识点,并且给出了一些SQL语句分析索引的执行情况.所以今天这篇文章给大家讲讲索 ...
- 『现学现忘』Git基础 — 8、Git创建本地版本库
目录 1.Git版本库介绍 2.创建本地版本库 场景一:创建一个空的本地版本库. 场景二:项目中已存在文件时,创建该项目的本地版本库. 场景三:在GitHub网站上创建仓库,克隆到本地. 1.Git版 ...
- switch语法
1. js 代码 // 1. switch 语句也是多分支语句 也可以实现多选1 // 2. 语法结构 switch 转换.开关 case 小例子或者选项的意思 // switch (表达式) { / ...
- Android四大组件——Activity——Activity之间通信下
显式意图:一般是用于应用内组件跳转.(如从ActivityA跳转到ActivityB) 隐式意图:一半用于应用之间的跳转.(如从ActivityA跳转到拨号) 隐式意图跳转到百度: 只需将前面Main ...
- Java 18 新特性:简单Web服务器 jwebserver
在今年3月下旬的时候,Java版本已经更新到了18.接下来DD计划持续做一个系列,主要更新从Java 9开始的各种更新内容,但我不全部都介绍,主要挑一些有意思的内容,以文章和视频的方式来给大家介绍和学 ...
- 小程序扫码、上传图片、css时间轴
de <!-- 导航 --> <view class="navSec flexBox"> <text class="navItem {{ s ...
- ansible的roles使用
1.创建roles文件夹 mkdir roles 2.在roles文件夹里面创建文件夹 cd roles/ mkdir {nginx,uwsgi,redis,mysql} 3.cd nginx 4.m ...
- python网络自动化ncclient模块,netconf协议检索与下发交换机配置
以juniper和华为设备为例 交换机必要配置,配置简单,使用ssh模式传输 #juniperset system services netconf ssh#华为 local-user netconf ...