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命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...
随机推荐
- Python自动批量修改服务器密码
工作中,我们经常会定期更换服务器密码,如果手动去修改,不仅费时,而且容易出错.下面提供了一种思路,可以实现批量.自动修改服务器密码. 大致思路:首先,为每一台服务器设定一个唯一标识:其次,将每台服务器 ...
- Markdown基础语法规则
你好,世界.粗体,斜体,测试,弟弟,H2O 论文题目 一级标题 二级标题 三级标题 1 2 3 点击此链接打开网址 公式 \(y = \sin x\) \[ y = \frac{1}{x} \] dd ...
- javaWeb代码整理02-jdbcTemplete数据库连接工具
jar包: maven坐标: /**属于spring框架的包*/<dependency> <groupId>org.springframework</groupId> ...
- Java语言学习day38--8月13日
###11哈希表的数据结构 A:哈希表的数据结构:(参见图解) 加载因子:表中填入的记录数/哈希表的长度 例如: 加载因子是0.75 代表: 数组中的16个位置,其中存入16*0.75=12个元素 如 ...
- XCTF练习题---WEB---xff_referer
XCTF练习题---WEB---xff_referer flag:cyberpeace{9626408a4b37eab65854d8ccd22f671c} 解题步骤: 1.观察题目,打开场景 2.注意 ...
- 【CSAPP】Shell Lab 实验笔记
shlab这节是要求写个支持任务(job)功能的简易shell,主要考察了linux信号机制的相关内容.难度上如果熟读了<CSAPP>的"异常控制流"一章,应该是可以不 ...
- lab_0 清华大学ucore实验环境配置详细步骤!(小白入)
实验步骤 1.下载项目 从github上 的https://github.com/kiukotsu/ucore下载 ucore lab实验: git clone https://github.com/ ...
- 【论文笔记】Federated Learning for Wireless Communications: Motivation, Opportunities, and Challenges(综述)
Federated Learning for Wireless Communications: Motivation, Opportunities, and Challenges Authors So ...
- Linux 查询 OS、CPU、内存、硬盘信息
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 一.前言 当我们接手了一台或者几台服务器的时候,首先我们 ...
- 以rem为单位,数值较小,border-radius:50%部分浏览器渲染不圆方法
元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法: 1.将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale( ...