Zenn
Open4

React公式ドキュメントを読む

React
初心者向け
AlmaAlma

Reactの新版公式ドキュメント(日本語版)を読んで気づきや学び、疑問点などを雑多にメモしていく
https://ja.react.dev/

AlmaAlma

クイックスタート

  • なぜclassではなくclassNameを使うのか
    • JSXではJavaScriptにHTML/CSSの記法を組みこんでいるが、classというキーワードは既にJavaScriptで使用されているため、classNameになった考えられる
  • map関数の使い方
    • リスト内の各項目にはそれを一意に識別するためのkey属性(文字列または数値)が必要
    • 通常、key はデータから来るはずで、データベース上のIDなどが該当する
const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}> // 一意なキーを指定
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);
  • イベントハンドラについて
    • onClick={handleClick} の末尾に括弧がないことに注意 
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}> // handleClickの末尾に括弧がない
      Click me
    </button>
  );
  • 同じコンポーネントを複数の場所でレンダーした場合、それぞれが独自の state を持つ
    • 予期しない動作を防ぐため?
    • コンポーネント間で状態を共有する必要がある場合は、その状態を共有するための親コンポーネントで管理するか、ReactのContext APIやReduxなどの状態管理ライブラリを使用する
  • フックはコンポーネントのトップレベル(または他のフック内)でのみ呼び出せる。条件分岐やループの中で useState を使いたい場合は、新しいコンポーネントを抽出してそこに配置する
  • state のリフトアップ（持ち上げ)
    • 親コンポーネント側でstateや更新関数を定義し、それを子コンポーネントにpropsとして渡すことでstateを複数の子コンポーネント間で共有できる
AlmaAlma

チュートリアル：三目並べ

  • JavaScript はクロージャをサポートしているため、内側の関数は外側の関数で定義されている変数や関数にアクセスできる
  • handleClick 内で既存の squares 配列を直接変更するのではなく、.slice() を使ってコピーを作成しているのはなぜか。
    • 直接的なデータの書き換えを避けることで、データの過去のバージョンを壊すことなく保持し、後で再利用することができる(巻き戻し機能の実装など)
    • コンポーネントがデータが変更されたかどうかを非常に安価に比較することができる(?)
  • 動的なリストを作成する際には、適切な key を割り当てることを強くお勧めする。適切な key がない場合は、key を含めるようデータ構造の再設計を検討するべき
AlmaAlma

Reactの流儀

  • state はインタラクティビティ、つまり時間とともに変化するデータのためにあるもの。静的なアプリでは使用しない。
  • トップダウンで高い階層にあるコンポーネントから構築を始めることも、ボトムアップで低い階層にあるコンポーネントから構築を始めることもできる。通常、単純な例ではトップダウンで作業する方が簡単であり、大規模なプロジェクトではボトムアップで進める方が簡単