「React実践入門」の感想・備忘録

管理者

4年前

Kindle本「React実践入門」のまとめ。

点数
感想
npxコマンドでインストールも行う
Propsをオブジェクトの分割代入で受け取る
フック
useState
axios

点数

78点

感想

React 16.8 で追加されたフックの説明がメインだった。
今はクラスコンポーネントを使っているので、関数コンポーネントを使う時がきたらもう一度読みたい。
著者の書籍は、実用的でわかりやすい。

npxコマンドでインストールも行う

ローカルにインストールされていないパッケージをnpxコマンドで指定した場合、パッケージをインストールしてから実行し、実行後はパッケージが破棄される。

Propsをオブジェクトの分割代入で受け取る

仮引数にオブジェクトの分割代入を使うと便利。

const Child = ({name, num}) => {
  return (
      <p>{name}:{num}</p>
  );
};
// として以下のように使用。
// <Child name={'Hoge'} num={100}/>
/  <Child {...attrs}/>

フック

React 16.8 で追加された新機能で、これによりstateと同じ機能をクラスを使わずに使えようになった。

useState：stateが関数で使えるようになる。
useEffect：ライフサイクルハックを関数で定義できる。
useMemo：Vue.jsのcomputedと同じ。キャッシュのようなもの。
useCallBack：コールバック関数をキャッシュする。
※useCallbackを利用しない場合は、コールバック関数は再描画のたびに新しい関数インスタンスを生成する。コールバック関数を定義する場合はuseCallbackを利用するべき。
useContext：React Contextから値を取得する。
useRef：createRefのフック版。

useState

import React, { useState } from 'react';

const Child = ({name, num}) => {
  const [count, setCount] = useState(0);
  const [person, setPerson] = useState({name: '', age: 0});
  return (
    <div>
      <p>count:{count}</p>
      <p>person:name={person.name}, age={person.age}</p>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <button onClick={() => setPerson({name: 'hoge', age: 20})}>setPerson</button>
    </div>
  );
};

useState()をコールすると、値を保持しておくためのstate変数（上記の例では変数count, person) が宣言される。

関数が終了するとローカル変数は消えてしまうが、state変数はReact によって保持される。

useStateの引数はstateの初期値。
クラスの場合とは異なり、オブジェクト以外も使用できる。
useStateの戻り値は、現在のstateとそれを更新するための関数のペアである。

axios

yarn add axiosでインストール。

import React, { useState } from 'react';
import axios from 'axios';

const JsonReader = () => {
  const [todos, setTodos] = useState([]);
  axios
    .get('http://localhost:3000/todos.json')
    .then(response => {
      setTodos(response.data.todos);
    });

  return (
    <ul>
      {todos.map(todo =>
        <li key={todo.key}>{todo.title}({todo.completed ? '完了' : '未完了'})</li>
      )}
    </ul>
  );
};