我不知道爲什麼一個對象不能在我的構造函數中分配給React？

Question

簡短的問題，我希望你能幫助。

爲什麼這樣嗎？

constructor() { 
    super(); 
    this.loader; 
    } 

    componentDidMount(){ 
    this.loader = document.getElementById('loaderTest'); 
    console.log(this.loader); 
    } 

但這不？

constructor() { 
    super(); 
    this.loader = document.getElementById('loaderTest'); 
    } 

    componentDidMount(){ 
    console.log(this.loader); 
    } 

第二種方法工作在香草JavaScript，但在與之反應控制檯返回null。我嘗試了谷歌搜索，但不知道我在找什麼。

看起來是這個構造函數在react已經呈現任何組件之前工作。我是否正確地承認這一點？

我只是開始理解面向對象的JavaScript，所以如果我的問題是愚蠢的，我很抱歉。

任何幫助，非常感謝。
由於
萌

編輯：一個陣營成分的在上下文中

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Site extends React.Component { 

    constructor() { 
    super(); 
    this.loader; 
    } 

    componentDidMount(){ 
    this.loader = document.getElementById('loaderTest'); 
    } 

    render() { 
    return(
     <div id="loaderTest" className="site_container__loader loading block--fullpage"> 
     </div> 
    ) 
    } 
} 

module.exports = Site; 

Answer 1

構造一旦第一次組件實例執行。您應該避免在構造器中使用DOM操作，因爲組件尚未安裝在實際的DOM中。

組件初始化期間Life cycle（安裝）：

• 構造（道具）
  • 的構造是初始化狀態和綁定方法
• componentWillMount在正確的地方
  • 一旦（客戶端和服務器）
  • 可以在此處更改狀態this.setState（）調用（不觸​​發除了渲染）
  • 調用只呈現前（）
• 渲染
  • 組件渲染（）被調用
• componentDidMount
  • 調用一次
  • 您可以執行DOM操作和其他事情，如API調用等。
  • 調用剛過渲染（）