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

旧城等待， 2021-09-30 15:00 166阅读 0赞

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

// 将生命周期方法添加到类中
    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我这里没写，自己写上即可<div id='time'></div> 
    }
    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。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
错误的含义是this之前不能没有super(props)  
那么super到底是什么呢

**super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。**

简言之，如果你想在constructor中使用this,就必须用super(props),  
那么在这里可以不传props吗？答案是最好写。

虽然 React 会在组件实例化的时候设置一遍 props(**当React添加对类的支持时，它不仅仅增加了对ES6类的支持。目标是尽可能支持广泛的类抽象。目前尚不清楚ClojureScript，CoffeeScript，ES6，Fable，Scala.js，TypeScript或其他解决方案在定义组件方面的成功程度。所以React故意不关心是否需要调用super - 即使是ES6类。**)，但在 super 调用一直到构造函数结束之前，this.props 依然是未定义的。  
执行 super(props) 可以使基类 React.Component 初始化 this.props。  
好，我把代码改了改

// 将生命周期方法添加到类中
    class Clock extends React.Component { 
      constructor(props) { 
        super(props);
        console.log(this.props)
        this.state = { 
          date: new Date(),
          tit:'success'
        };//初始化
      }
    
      componentDidMount() { 
         this.timerID = setInterval(
           () => this.tick(),
           1000
         );
       }
    
       componentWillUnmount() { 
         clearInterval(this.timerID);
       }
    
       tick() { 
         this.setState({ 
           date: new Date()
         });
       }
    
    
    
      render() { 
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 { this.state.date.toLocaleTimeString()}.</h2>
            <button>{ this.props.val}</button>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Clock val='success'/>,
      document.getElementById('example')
    );

总之，你不管用不用this.props。最好在使用constructor构造函数初始化时都用**super(props)**

**如果需要访问this就设置constructor**

**如果没用到constructor,是可以不写的；React会默认添加一个空的constructor。**

**如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;**

**如果你在constructor中要使用this.props,就必须给super加参数：super(props)；**

**无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/d3766c85e4184185bac82e9c8d8ed48b.png