ReactJS：火法當組件被渲染

Question

我得到ReactJS一個一般性的問題：

是否可以立即啓用的方法，所有的JSX組件（<div> components </div>）被渲染成功？所以如果有些只是在某些條件下呈現的，我是否可以在所有條件都爲true的情況下儘快開火。

我怎麼會檢查是否一切都得到了成功地呈現？

Answer 1

有一個生命週期方法componentDidMount將反應呈現組件後立即被調用，它會被調用一次，只有在初始渲染後，我認爲你可以使用該方法。

作爲每DOC：

componentDidMount（）後的成分是 安裝被立即調用。需要DOM節點的初始化應該放在這裏。如果您 需要從遠程端點加載數據，這是一個好地方 實例化網絡請求。在此方法中設置狀態將會觸發重新渲染。

關於第二疑問句：

正進行渲染元素的一些條件的基礎上，我假設你正在使用某種形式的布爾或檢查數組的長度，所以有生命週期方法componentWillUpdate，它將在該方法內部重新呈現組件（它不會在初始呈現中調用）之前被調用，您可以檢查所有條件並在所有條件爲真時調用任何方法。 所以，只要你做setState它會被調用，你可以把邏輯放在這裏。

Answer 2

這只是一個骨架，但它應該幫助你去，你要尋找的解決方案：

type ChildProps = { 
    onUpdated:() => void; 
} 

class MyChildComponent extends React.component<ChildProps, void> { 
    componentDidUpdate() { 
     this.props.onUpdated(); 
    } 

    render() { 
     ... 
    } 
} 

class MyComponent extends React.Component<void, void> { 
    private childCount: number; 
    private updated: number; 

    constructor() { 
     this.childCount = 2; 
    } 

    render() { 
     this.updated = 0; 

     return (
      <div> 
       <MyChildComponent onUpdated={ this.childUpdated.bind(this) } /> 
       <MyChildComponent onUpdated={ this.childUpdated.bind(this) } /> 
      </div> 
     ); 
    } 

    private childUpdated() { 
     this.updated++; 
     if (this.updated === this.childCount) { 
      // do something... 
     } 
    } 
}