React はデータをリクエストするためにどのフックを使用しますか?

react は、「componentDidMount」フックを使用してデータをリクエストします。 React のデータリクエストはフック関数componentDidMount()で実行され、外部データのロードや他の副作用コードの処理に使用できます。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React のデータ リクエストはフック関数で実行されます。componentDidMount

componentDidMount メソッドのコードは、コンポーネントが Web ページに完全にマウントされた後のものです。呼び出しが実行されるため、データのロードが保証されます。さらに、このメソッドで setState メソッドを呼び出すと、再レンダリングがトリガーされます。したがって、このメソッドは外部データをロードしたり、他の副作用コードを処理したりするために正式に設計されています。

この記事では、React で使用すると便利ないくつかのデータ リクエスト メソッドをまとめます。主に 3 種類あり、 はすべて json-server を介してデータ リクエストをシミュレートするインターフェイスです。

1 axios

この方法はより一般的に使用され、vue でよく使用されます

使用前にダウンロード最初: npm i axios

 axios.get(' http://localhost:3000/datalist').then(res=>{
  console.log(res);
})

結果:

2 フェッチ メソッド

fetch は HTTP データ リクエストのメソッドであり、XMLHttpRequest の代替手段です。 Fetch は ajax をさらにカプセル化したものではなく、ネイティブ JS です。 Fetch 関数はネイティブ JS であり、XMLHttpRequest オブジェクトを使用しません。 [fetch から引用]

fetch('http://localhost:3000/datalist').then(res=>res.json()).then(res=>{
     console.log(res)
})

結果:

##3 従来の ajax リクエスト #これは誰もがよく知っているはずなので、詳細は説明しませんが、もちろん、react でも使用できます。 [関連する推奨事項:

Redis ビデオ チュートリアル

]

以上がReact はデータをリクエストするためにどのフックを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。