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

基礎から学ぶ 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]) // 配列に追加
  }
})