ReactJS APIを呼び出す正しい方法

Question

私はReactJSにはまったく静かです。どの人がAJAXコールを作成する正しい方法であることを示唆することができますか？ 現在、私は

this.serverRequest = $.get(this.props.source, function (result) { 
     console.log("after serverRequest");   
    }.bind(this)); 

を使用しています。しかし、私はチュートリアル

componentDidMount: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 

で多くのサンプルを見て、正しい方法と理由である私を提案してください？

Answer 1

コンポーネントがAJAXリクエスト自体を管理している場合は、componentDidMountがこれを行う正しいライフサイクルメソッドです。 componentDidMountは、DOMに挿入されるコンポーネントのライフサイクルで一度だけ呼び出されます。私はそのプライベート可視性を表現するために、メソッド名の前に_を入れている

componentDidMount() { 
    this._serverRequest(); 
} 

_serverRequest() { 
    /* your AJAX code here */ 
} 

：それでも、あなたは別のメソッドにロジックを考慮することができます。 JSではメソッドの可視性のサポートはありませんが、_はメソッドを外部から呼び出すべきではないものとしてマークするための規約です。 Reactコンポーネントの場合、コンシューマに公開される唯一のパブリックAPIは、propsのセットです。

あなたのコンポーネントがアンマウントされている場合は、次の点に留意してください。あなたのAjaxリクエストが返される前にDOMから削除された場合は、もはや存在しないコンポーネントのsetState()にアクセスしようとするとエラーが発生します。これを防ぐためにできる安全性チェックはいくつかありますが、一般的には推奨されていないパターンです。アプリケーションライフサイクルで削除されることは決してない上位コンポーネントで、すべてのAJAXリクエストを管理しようとする必要があります。下位レベルのAjax対応コンポーネント（サーバー側の検索機能付きのスマートな先行型）を主張する場合は、DOMからフォームを削除するのではなく、不要な場合はstyle={{display: 'none'}}で非表示にすることをお勧めします。これにより、このようなAjax関連のエラーだけでなく、不要な重複Ajaxリクエスト（コンポーネントがDOMに新規に挿入されるたびにcomponentDidMountが呼び出される）が回避されます。

しかし、実際のアプリケーションでは、ビジネスロジックとサーバー側のすべての通信をコンポーネントの外に置いたほうがよいでしょう。 Reactをレンダリング専用に使用し、アプリケーション状態を管理するためにreduxまたはfluxのようなフレームワークまたはデザインパターンを使用します。