我们先把菜鸟教程的一段代码拿过来分析一下。下面这段代码是用了将生命周期方法添加到类中实现时钟效果。
代码语言：javascript复制// 将生命周期方法添加到类中
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
