すでにレンダリングされたコンテナへのコンポーネントの再レンダリングは期待通りに機能しませんか？

Question

rerendered要素がstate.status要素に変更を適用しない理由を教えてください。ReactDOM.unmountComponentAtNodeこれを行うには適切な方法を使用していますか？要素自体が削除されるべきではありませんが、プレゼンテーション用です。

class CustomModal extends React.Component { 
 
    
 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
    
 
     status:this.props.status 
 
    
 
    } 
 
    this.onClick = this.onClick.bind(this); 
 
    } 
 
    
 

 
    render(){ 
 
    return <h1 onClick={this.onClick}>Click Me!</h1> 
 
    } 
 
    
 
    onClick(){ 
 
    
 
    console.log('May i log to console?:' + this.state.status) 
 
    
 

 
    this.setState({status:false}); 
 
    
 
    // this is somewhat cumbersome? 
 
    {/* ReactDOM.unmountComponentAtNode(document.getElementById('container')) */} 
 
    
 
    // supposed to rerender the element? 
 
    // And the state.status element should be true? 
 
     ReactDOM.render(<CustomModal status={true} />,document.getElementById('container')) 
 
    } 
 

 
} 
 

 

 
     ReactDOM.render(<CustomModal status={true} />,document.getElementById('container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id="container"> 
 

 
</div>

Answer 1

DOMに描画するための主要なAPIは次のようになります。

ReactDOM.render(reactElement, domContainerNode) 

は、既存のコンポーネントのプロパティを更新するには、あなたが再び をレンダリング呼び出します新しい要素。

あなたはシングルページアプリ内のコンポーネントを反応させるのレンダリングされている場合は、あなた アプリが 適切な時期にunmountComponentAtNodeを呼び出します確保するために、アプリケーションのビューのライフサイクルにプラグインする必要があるかもしれません。反応しても は自動的にツリーをクリーンアップしません。手動で電話する必要があります。

ReactDOM.unmountComponentAtNode(domContainerNode) 

これは重要で、しばしば忘れてしまいます。 unmountComponentAtNodeを呼び出すことを忘れると、アプリがメモリをリークさせます。 の作業が適切である場合、自動的に検出する方法はありません。すべてのシステムが異なります。

DOMに固有のものではありません。 React Nativeビュー を既存のiOSアプリの途中に挿入する場合は、同様の問題が発生します。

出典：https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html