React关于constructor与super(props)之间的相爱相杀

马克社区

发布于 2022-06-20 16:20:11

3000

发布于 2022-06-20 16:20:11

文章被收录于专栏：高端IT高端IT

我们先把菜鸟教程的一段代码拿过来分析一下。下面这段代码是用了将生命周期方法添加到类中实现时钟效果。

// 将生命周期方法添加到类中
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。