復習のReact
基本的にJavaScriptで書くが、必要があればTypeScript版のコードを掲載する。
React18を対象にする
Next.jsなどのフレームワークは扱わない
Viteで環境構築する
コンポーネント
propsとstateはコンポーネントで値（状態 ≒ state）を扱う。propsは引数、stateはコンポーネントのローカル変数。
propsにはいろんな型の値を渡せる（プリミティブ & オブジェクト）。
const Child = (props) => {
console.log(props)
return (
<>
<p>id: {props.obj.id}</p>
<p>name: {props.obj.name}</p>
</>
)
}
const App = () => {
return (
<Child obj={{ id: 1, name: "kento" }} />
)
}分割代入で受け取る。
const Child = ({ obj: { id, name }}) => {
return (
<>
<p>id: {id}</p>
<p>name: {name}</p>
</>
)
}
const App = () => {
return (
<Child obj={{ id: 1, name: "kento" }} />
)
}TypeScriptでの型定義。
const Child = ({ obj: { id, name }}: { obj: { id: number, name: string }}) => {
return (
<>
<p>id: {id}</p>
<p>name: {name}</p>
</>
)
}useState
const App = () => {
const [count, setCount] = useState(0)
return (
<>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</>
)
}type Book = {
id: number,
name: string
}
const books = [
{ id: 1, name: "kento" },
{ id: 2, name: "kouta" },
{ id: 3, name: "nao" },
{ id: 4, name: "miku" },
]
const Books = ({ books }: { books: Book[] }) => {
return (
<>
{books.map(({id, name}) => (
<Book id={id} name={name} key={id} />
))}
</>
)
}
const Book = ({ id, name }: Book) => {
return (
<>
<p>id: {id}, name: {name}</p>
</>
)
}
const App = () => {
return (
<Books books={books} />
)
}コンポーネントが再レンダリングされるタイミング（詳しく書く）
- stateが変化した時
- propsが変化した時
- 親コンポーネントが再レンダリングされた時
key属性
children
ReactNodeで型定義?
参考 : Reactのchildrenの型で子コンポーネントを制御する（したかった）
自動バッチング
複数のステート更新を一回にまとめる機能。
参考
>Vueユーザー「あれ、ReactでonClickが動かない。。」のワケ - Qiita
自動バッチング
新機能：自動バッチング React 18の新機能Automatic Batchingを理解する｜デザミス株式会社 U-motion 開発チーム