ReactJs DOMからコンポーネントが削除されたときを知る方法

Question

現在Reactに問題があります。コンポーネントがDOMからいつ削除されるかを知る必要があります。

コンポーネントのライフサイクルで見つかったのは、コンポーネントがDOMから削除される前に呼び出されるcomponentWillUnmountです。

Reactでこれを達成する方法はありますか？ プレーンジャバスクリプトでは？

ありがとうございました。

[EDIT]

@jpdelatorre "プレーンジャバスクリプト" ===

私のユースケースは、反応成分の中jsPlumbの使用である;-)ライブラリを使用しません。

基本的にjsPlumbは、位置計算を使用してDOMにsvgを描画するライブラリです。

私の主な構成要素には、項目のリストがあります。 各アイテムはコンポーネントです。 各レンダリングされたアイテムでは、JsPlumbを使用して描画します。

しかし...リストの項目を削除するとDOMの位置が変更されるため、jsPlumbに新しい位置に基づいて項目を再描画するように依頼する必要があります。そのため、コンポーネントがDOMから完全に削除される時期を知る必要があります。

Answer 1

ありがとうございます！私は私のニーズに合った解決策を見つけ、（IMHO）きれいです。

私の親コンポーネントでは、私はcomponentDidUpdateライフサイクルイベントを処理し、そこには変更が必要かどうかを知ることができます（prevPropsとpropsで）。私の行動を発動してください...

class MyComponent extends Component { 
    // this one is called each time any props is changed 
    componentDidUpdate(prevProps, prevState) { 
     // if condition is matched then do something 
    } 

} 

Answer 2

componentWillUnmountは正しいライフサイクルメソッドです。あなたが言うように、コンポーネントが削除される前にトリガされます。削除されるまで待つ必要のあるものがある場合は、短いタイムアウト値を持つsetTimeoutを使用して、現在のタスクが完了したらコールバックをスケジュールできます。

Answer 3

componentWillUnmountは、引っ掛けることができるライフサイクルメソッドです。

しかし、前述のように、コンポーネント2のアンマウントについては、コンポーネント1のサブスクリプションでコンポーネント1のリスナーで動作させるライフサイクルメソッドでアクションをトリガーする必要があります。

Answer 4

すでに述べたように、componentWillUnmountが必要です。ここで が反応における単純な例です（私はそこには、1を何が起こっているかを取得するためのいくつかのコメントを追加）：

ここ

var Button = React.createClass({ 
    componentWillUnmount: function(){ 
     // console will show this message when compoent is being Unmounted("removed") 
     console.log('Button removed'); 
    }, 

    render() { 
    return <h1 ref='button_node'> 
    <ReactBootstrap.Button bsStyle="success">Red</ReactBootstrap.Button> 
    </h1>; 
    } 
}); 



var RemoveButton = React.createClass({ 
    getInitialState: function() { 
    // this state keep tracks if Button removed or not 
    //(you can use it for some redrawing or anything else in your code) 
    return {buttonMounted: true} 
    }, 

    mountRedButton: function(){ 
    ReactDOM.render(<Button/>, document.getElementById('button')); 
    this.setState({buttonMounted: true}); 
    }, 

    unmountRedButton: function(){ 
    ReactDOM.unmountComponentAtNode(document.getElementById('button')); 
    this.setState({buttonMounted: false}); 
    }, 

    render() { 
    return <h1> 
     //based on condition if Button compoennt removed or not we show/hide different buttons 
     { this.state.buttonMounted ? <ReactBootstrap.Button onClick={this.unmountRedButton } bsStyle="danger">Remove Red Button!</ReactBootstrap.Button> : null} 
     { this.state.buttonMounted ? null :<ReactBootstrap.Button onClick={this.mountRedButton } bsStyle="success">Add Red Button!</ReactBootstrap.Button> }   
    </h1>; 
    } 
}); 


// mount components  
ReactDOM.render(<Button/>, document.getElementById('button')); 
ReactDOM.render(<RemoveButton/>, document.getElementById('remove')); 

は「プレーンジャバスクリプト」についてのようJSFiddle

上で完全実施例である - あなたは 何：すでに私の例が反応しReactDomに基づいており、より多くの何も（実際にも反応し、ブートストラップがされていない、私はかなりのボタンのためにそれを追加し、それがすべてでは必要ありません）、JSに反応

Updateを使用してMutationObserverの使用について？ DOMのNodeが削除されているのに、ノード削除の前にcomponentWillUnmountが実行されている時間が必要な場合は、それを使用することができます。ボタンを使用した私の例の後に：ここにはボタンがあります：

var removalWatcher = new MutationObserver(function (e) { 
    var removalTimeStamp = '[' + Date.now() + '] '; 
    if (e[0].removedNodes.length) { 
    console.log('Node was removed', e[0].removedNodes, 'timestamp:', removalTimeStamp) 
    }; 
}); 

コンソールに出力されるタイムスタンプは、MutationObserverとReact ComponentWillUnmountの両方を比較できます。