「基礎から学ぶ React/React Hooks」の感想・備忘録2

管理者

2年前

基礎から学ぶ React/React Hooks

posted with ヨメレバ

asakohattori シーアンドアール研究所 2021年08月24日頃

React Hooks
1. useEffectのクリーンアップ関数
2. useRef
  1. 1. DOMへのアクセス
  2. 2. 状態管理
その他
1. ULID
2. Chakra UI
  1. インストール
  2. 導入

React Hooks

useEffectのクリーンアップ関数

クリーンアップ関数が実行されるタイミングは2つある。

コンポーネントがアンマウントされるとき
副作用関数（useEffectの第1引数）が実行される前

以下のような処理はクリーンアップ関数に記述する。

タイマーの解除
イベントリスナの削除
ファイルのクローズ
FireStoreのunsubscribe

useRef

useRefフックには2つの機能がある。

1. DOMへのアクセス

const buttonRef = useRef(null)
const inputRef = useRef(null)
return (
  <>
    <button ref={buttonRef} onClick={()=>console.log(buttonRef.current.innerText)}>hoge</button>
    <input type="text" ref={inputRef} onChange={()=>console.log(inputRef.current.value)}/>
  </>
)

2. 状態管理

const count = useRef(0)
console.log(count.current)

useRefを使って生成できるref オブジェクトのcurrent プロパティに設定した値は、 useStateのようにコンポーネントが再マウントされても保持される。
useStateと違って、 useRefのcurrent プロパティは値が更新されても再レンダリングが起きない。

その他

ULID

ユニークとなるランダムな値を生成するためのライブラリ。
有名なライブラリにUUIDもあるが、ULIDは生成した順にソートすることができる。
npm install ulidでインストール。

import { ulid } from 'ulid'
console.log(ulid())

Chakra UI

Reactコンポーネントライブラリ。

インストール

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

導入

import { ChakraProvider } from '@chakra-ui/react'
import Hoge from './Hoge'

const App = () => {
  return (
    <ChakraProvider>
      <Hoge />
    </ChakraProvider>
  )
}
export default App

import { Box } from "@chakra-ui/react"

export default Hoge = () => {
  <Box px={10} my={10} backgroundColor="red">Hello</Box>
}