なぜレンダリングメソッド内にaxios.get（blabla）を記述しないのですか？

Question

は、なぜ私たちはcomponentWillMountでそれを配置する必要があります、renderメソッド内

axios 
    .get('https://rallycoding.herokuapp.com/api/music_albums') 
    .then(response => this.setState({ albums: response.data })); 

を書きませんか？

renderメソッドの先頭に置くと何が問題になりますか？

私はそれをrenderに入れて同じ結果を得ましたが、チュートリアルではcomponentWillMountであるはずです。

Answer 1

一般的に、この2つの違いは、に何回このリクエストをしたいのですか。あなたが要求コンポーネントが搭載されている初回のみ起こるようにしたい場合は、要求がすべてのレンダリング（落胆）で発生する場合

、あなたはその後、renderメソッドを使用し、ComponentWillMount（望ましい）

を使用します。 。各要求は、再レンダリングが発生しますsetStateを呼び出す要求を行いますどの再レンダリングする原因になりますsetStateを呼び出すためrender方法でそれを入れて、あなたの場合は

は、実際に無限再帰を引き起こします。..

非常に多くの頻繁な要求から、パフォーマンス上のコストとネットワークの輻輳はもちろんですが、

class Example extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     counter: 0 
 
    } 
 
    } 
 
    render() { 
 
    // fake async action to act as a request 
 
    setTimeout(() => { 
 
     const { counter } = this.state; 
 
     this.setState({ 
 
     counter: counter + 1 
 
     }) 
 
    }, 500) 
 
    return React.createElement('h3', null, this.state.counter) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    React.createElement(Example), 
 
    document.querySelector('#example') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<h2>Re-rendering forever</h2> 
 
<div id="example"></div>