・components/DataFetch.jsを作成
・rfceスニペット
・useState,useEffectの読み込み
・ランダムなユーザーをAPIから取得して表示したいので、userというstateを作る(初期値はnull)
・外部APIとのやり取りになるのでloadingを作る(初期値はtrue)
・データ取得の関数を作る。ここでは外部APIを取得してくるのでasnc awaitを使って非同期処理にしていく。
・とってきたデータをセットする。
・完成した関数をuseEffect内で読み込む
・emptyarrayを第2引数に渡し、初回render時のみの実行にする。
・jsxにはnameの表示をする。
・App.jsに読み込む
DataFetch.js
import React,{ useState, useEffect } from 'react'
function DataFetch() {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
const fetchData = async () => {
const response = await fetch('https://api.randomuser.me/')
const data = await response.json()
const [item] = data.results
setUser(item)
setLoading(false)
}
useEffect(() => {
fetchData()
},[])
return (
<div>
{loading ? <h1>Loading...</h1> : <h1>{user.name.first} {user.name.last}</h1>}
</div>
)
}
export default DataFetch
App.js
import React from 'react';
import './App.css';
import DataFetch from './components/DataFetch';
// import EffectHook from './components/EffectHook';
// import Counter from './components/Counter.js';
// import CounterHook from './components/CounterHook';
// import FormHook from './components/FormHook';
// import ItemHook from './components/ItemHook';
// import MouseEventEffect from './components/MouseEventEffect';
function App() {
return (
<div className="App">
{/* <Counter /> */}
{/* <CounterHook /> */}
{/* {<FormHook />} */}
{/* <ItemHook /> */}
{/* {<EffectHook />} */}
{/* <MouseEventEffect /> */}
<DataFetch />
</div>
);
}
export default App;
ブラウザでは無事に名前が取得できている。
・もう少しネクストレベル。
・component/DataFetchById.jsを作成
・rfceスニペット
・useState,useEffectの読み込み
・今回は記事を扱うのでpoststateを用意
・idstateも用意し、初期値に1を設定
・loadingstateを用意
・fetchdatafunctionを作る
・asncを使う
これをuseEffect内に読み込む
今回はidが変わる度にuseEffectを実行したいので、第2引数にidを入力する。
jsx内にはinputフィールドと記事のタイトルを表示。
App.jsに読み込む
DataFetchById.js
import React,{ useState, useEffect } from 'react'
function DataFetchById() {
const [post, setPost] = useState(null)
const [id, setId] = useState(1)
const [loading, setLoading] = useState(true)
const fetchData = async () => {
setLoading(true)
const responce = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
const item = await responce.json()
setPost(item)
setLoading(false)
}
useEffect(() => {
fetchData()
},[id])
return (
<div>
<input
type='text'
value={id}
onChange={e => setId(e.target.value)}
/>
{loading ? <h1>Loading...</h1>: <h1>{post.title}</h1>}
</div>
)
}
export default DataFetchById
App.js
import React from 'react';
import './App.css';
// import DataFetch from './components/DataFetch';
import DataFetchById from './components/DataFetchById';
// import EffectHook from './components/EffectHook';
// import Counter from './components/Counter.js';
// import CounterHook from './components/CounterHook';
// import FormHook from './components/FormHook';
// import ItemHook from './components/ItemHook';
// import MouseEventEffect from './components/MouseEventEffect';
function App() {
return (
<div className="App">
{/* <Counter /> */}
{/* <CounterHook /> */}
{/* {<FormHook />} */}
{/* <ItemHook /> */}
{/* {<EffectHook />} */}
{/* <MouseEventEffect /> */}
{/* <DataFetch /> */}
<DataFetchById />
</div>
);
}
export default App;
このようにuseEffectを使うことで、ライフサイクルメソッドや副作用処理を関数コンポーネントで扱うことができる。
副作用の扱いにはuseEffectと同じようにuseLayoutEffectというフックも存在するが、ほとんどuseEffectと同じ動きをする。
一点だけ違うところは、useLayoutEffectは処理がレンダリングをブロックしてしまうということ。だから基本的にレンダリングのブロックが必要ない場合はuseEffectを使うことを推奨する。