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

2023.05.13
スポンサーリンク
基礎から学ぶ React/React Hooks
posted with ヨメレバ
asakohattori シーアンドアール研究所 2021年08月24日頃
楽天ブックスで見る
楽天koboで見る
Amazonで見る
Kindleで見る
ebookjapanで見る

点数

79点

感想

JavaScriptからReact.jsまで幅広く書かれていた。

基礎から丁寧に説明されているが、なんとくなく全体的にわかりづらい気がした。

また、本書ではTypeScriptは扱われていないため、実際の開発現場では本書の内容以外にTypeScriptの導入も必要になってくる。

JavaScript

typeof nullは’object’を返す

これは有名なバグである。

Null 合体演算子 (??)

  • Null 合体演算子(??)は左辺がnullまたはundefinedの場合のみ右辺値を返す。
  • OR演算子(||)は左辺がfalseと評価される場合に右辺値を返す。
null ?? 'default string' // 'default string'
0 ?? 'default string' // 0
null || 'default string' // 'default string'
0 || 'default string' // 'default string'

配列内の検索

arr.indexOf('hoge')

配列、オブジェクトの連結やコピーはスプレッド構文を使う

const arr3 = [...arr1, ...arr2]

多次元配列を低次元配列にフラット化

arr.flat()
※ ES2019
※ 引数で何次元までの配列をフラットにするかを指定可能。

React

コンポーネントがレンダリングされるタイミング

  • 初回レンダリング時
  • stateが変化したとき
  • 親コンポーネントがレンダリングされたとき
  • カスタムフックから受け取っている変数が変化したとき

チェックボックスの状態管理

  • stateを配列にする。
  • Array.includesメソッドを使って、値がstateに含まれているかチェックする
const [values, setValues] = useState([])
const handleCheckboxChange = (e=> {
  if (values.includes(e.target.value)) {
    setValues(values.filter(value=>value!==e.target.value)) // 配列から削除
  } else {
    setValues([...values, e.target.value]) // 配列に追加
  }
})
スポンサーリンク

コメント