リアクションコンポーネントとメモリリーク

Question

私はレガシーコードを用意しています。これは、リクエストごとにサーバー上にリアクションコンポーネントをレンダリングするので、メモリリークがあることが明らかです。私はこのコードをコーナーに問題を持っている：

componentWillMount: function() { 
    var onLogin = this.props.onLogin || function() {}, 
     onLogout = this.props.onLogout || function() {}; 

    this.on('authChange', function() { 
     console.log('user authenticated:', this.state.isAuthenticated); 
     return this.state.isAuthenticated 
       ? onLogin(this.state) 
       : onLogout(this.state); 
    }.bind(this)); 
    }, 

を私はすべての要求にthisオブジェクトが新しいリスナーを記憶していることを信じて、しかしときthis要素はごみとしてマークされていない理由を私は得ることはありませんコンポーネントのレンダリングが行われます。

Answer 1

コンポーネントをアンマウントする前に、authChangeハンドラをアンバインドする必要があります。これはcomponentWillUnmountで行うことができます。

あなたが渡された最初の小道具を使用してハンドラ関数を作成しているので、あなたが後でそれをアンバインドすることができますので、あなたがプロパティにそれを保存する必要があります

componentWillMount: function() { 
    var onLogin = this.props.onLogin || function() {}, 
     onLogout = this.props.onLogout || function() {}; 

    this.authChange = function() { 
     console.log('user authenticated:', this.state.isAuthenticated); 
     return this.state.isAuthenticated 
       ? onLogin(this.state) 
       : onLogout(this.state); 
    }.bind(this); 

    this.on('authChange', this.authChange); 
    }, 

    componentWillUnmount: function() { 
     this.off('authChange', this.authChange); 
     this.authChange = null; 
    } 

注私はthis.onを見たとき、私は思っていることあなたはjQueryを使用しているかもしれませんが、それがどうなるかははっきりしません。私の答えはthis.offを使用してイベントリスナーを切り離しますが、フレームワーク内の対応するメソッドを使用する必要があります。私はcomponentDidMountにあなたの機能を移動し、componentWillUnmount

重要にクリーンアップを追加します

Answer 2

：componentWillMountはサーバーとクライアントで呼び出されますが、componentDidMountだけクライアントに呼ばれています。

eventListeners,setIntervalなどの機能を使用する場合は、クリーニングする必要がある場合はcomponentDidMountに入れてください。サーバーはcomponentWillUnmountを呼び出さず、通常はメモリリークの原因となります。