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命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...
随机推荐
- MongoDB 集群-主从复制(一主二从)
MongoDB 集群-主从复制(一主二从) 官方文档 https://docs.mongodb.com/manual/tutorial/deploy-replica-set/ https://docs ...
- python中faker模块的使用
Faker 安装 pip install Faker 基本使用 from faker import Faker #创建对象,默认生成的数据为为英文,使用zh_CN指定为中文 fake = Faker( ...
- Python 速通爆肝、列表推导式、生成器、装饰器、生命游戏
列表推导式.赋值.切片(替换.插入).字符串处理与判断.enumerate().格式化字符串.读写文件.global 关键字.字符串startswith().类与对象.生成器.装饰器.Self.*ar ...
- Postman+newman+jenkins+git实战
一.接口分类,流程,用例设计 接口分类: 外部接口:被测系统与外部其他系统之间的接口. 承保系统(被测系统),核算系统. 内部接口:被测系统内部各个子模块之间的接口. 承保系统(A模块,B模块) 测试 ...
- Python学习笔记: pip install 常见错误汇总
本机环境RHEL8, Python3.9 pip install: 无法安装最新版本的包 在pypi上查看pkg的页面,因为有些pip包的版本对特定的python版本有要求 pip install e ...
- 给swap分区扩容
一.先添加一块硬盘,如果硬盘空间还有没有被分区的也可以使用,再创建一个分区(分区可以是主分区或者扩展的逻辑分区) fdisk /dev/sdb n 代表创建分区 p 代表 ...
- python学习-Day24
目录 今日内容详细 主菜 : ATM+购物车作业 项目开发流程 需求分析 架构设计 分组开发 项目测试 交付上线 需求分析 提炼项目功能 项目大致技术栈 架构设计 编程历经过程 三层架构 将ATM分为 ...
- 前后端分离,简单JWT登录详解
前后端分离,简单JWT登录详解 目录 前后端分离,简单JWT登录详解 JWT登录流程 1. 用户认证处理 2. 前端登录 3. 前端请求处理 4. 后端请求处理 5. 前端页面跳转处理 6. 退出登录 ...
- 解决学校在线评测系统不支持C++11的问题
如图,我们老师搞的这个评测系统它不支持C++11.但分析错误信息可知GCC本身版本是支持C++11的,只不过没开开.平时的时候我们可以对"g++"后使用"-std=c++ ...
- Azure Service Fabric 踩坑日志
近期项目上面用到了Azure Service Fabric这个服务,它是用来做微服务架构的,由于这套代码和架构都是以前同学留下来的,缺少文档,项目组在折腾时也曾遇到几个问题,这里整理如下,以供参考. ...