【ミライトデザイン社内勉強会#6】Reactの基礎

JSX の導入 – React

• JSX と React Element について · react-hands-on
• トランスパイルしてブラウザに表示する
• 最終的にはjsのファイルに変換できるのでjsでできることはなんでもできる
  • {}で囲めばjsの処理がなんでもかける
  • XMLの記法が追加されただけ
• JSXを使うことによって同じファイルに表示とロジックがかける
• JSXの属性はキャメルケースにしないといけない
  • HTMLならtab_indexとかくところをtabIndexと書かないといけない
• タグがからの場合は<img src={user.avatarUrl} />閉じタグが必要
• Babelって何？
  • コンパイラ、constをvarに変換してくれたりする
  • https://babeljs.io/
    • ここでbabelが試せるドン

要素のレンダー – React

• <div id="root"></div> はidじゃなくてもセレクターならなんでもいい
  • セレクタの種類－CSSの基本
• reactは要素が変更した部分だけ再描画してくれる
  • 普通のwebサービスではそこまでわからないが、重たい処理をしたりすると違いがでてくる。

コンポーネントと props – React

• クラスでも関数でもコンポーネントを作れる
• propsは引数みたいな理解でいいと思う
• コンポーネントは全て大文字から始める

• コンポーネントをより小さなコンポーネントに分割することを恐れないでください。

  • サーバーサイドのクラスの分割と考え方は同じ

• 自分自身の props は決して変更してはいけません。

  • 変更しようと思ったらできるの？
    • propsに代入する式はかけるけど、実際には値は変更されない。
    • 外から受け取った時点から変更はできない。

state とライフサイクル – React

• componentWillUnmount() { clearInterval(this.timerID); }でタイマーを削除する必要あるの？
  • reactはSPAなので削除しないと残り続けてしまう。
• stateが変更されると再描画してくれる。
  • stateを直接変更した場合や、ただの変数に入れただけでは再描画はしてくれない。
  • setStateでstateを更新した時だけreactは再描画してくれる。
• setStateにコールバック関数を渡すと、reactがstateを更新した後に処理をしてくれる
  • this.stateを使うと、更新される前のstateが使われることがある
  • 参考
    • Reactのドキュメント: setState()
    • 検証記事: React の setState() の引数が関数の場合とオブジェクトの場合の違いについて整理する

データは下方向に伝わる

• 親コンポーネントでも子コンポーネントでもステートフルやステートレス等を気にすることはない。
  • カプセル化

イベント処理 – React

• React のイベントは小文字ではなく camelCase で名付けられています。
• reactではonClickにreturn falseをしても動作を抑止できない
  • aタグの遷移を抑止できない。
  • reactではpreventDefault()を使用する

条件付きレンダー – React

• if文で使用するコンポーネントを制御できる
• JSXでインラインで条件を記述できる
  • 条件部分がtrueであれば&&の後の要素が出力される

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

• 他のコンポーネントがレンダーされているときに、自身を非表示にしたい時はnullを返すようにする
  • 表示/非表示の判断を子自身がする時
  • この処理をやる機会は少なそう
  • nullを返してもコンポーネントのライフサイクルメソッドは呼び出される

リストと key – React

• リストには識別できるようにkeyを与えるべきである
  • 一意に識別ができるものを設定する
  • リストのindexをkeyにすることもできるが、要素の並び順が変更される可能性がある場合は使用しない方がいい
• コンポーネントに抽出した場合はコンポーネントにkeyを持たせる
• keyは1つのリストで一意であればよい
  • 2つの異なる配列の場合は同一のkeyが使用されていても問題ない
• mapの結果をインラインで書くこともできる

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

フォーム – React

• 制御されたコンポーネント
  • React によって値が制御される入力フォーム要素
  • こっちの役の方がわかりやすいかも
    • React の状態を「真実の単一ソース」とすることで、この 2 つを組み合わせることができます。そうすると、フォームをレンダリングするReactコンポーネントは、その後のユーザー入力時にそのフォームで何が起こるかも制御します。このようにReactによって値が制御される入力フォーム要素は、「制御されたコンポーネント」と呼ばれます。
• <input type="file"> はhtmlと何が違うの？
  • 読み取り専用。htmlと同じ。

state のリフトアップ – React

• チュートリアル：React の導入 – React チュートリアルにも同じようなのがあった
• リフトアップとは子コンポーネントでstateを共有する場合に、直近の共通の祖先コンポーネントに移動すること
• stateを変更する時は親コンポーネントからsetStateのメソッドを受け取り、onChangeで実行する
• 宣言的にかけるプログラミング言語だからリフトアップができている。
  • jQueryだと宣言的には書けない。
  • 【宣言的】foo * 3 みたいな、fooの値が変われば表示される値も変わる。

コンポジション vs 継承 – React

• jsxをコンポーネントのタグで囲めば、コンポーネントに渡すことができる。
  • childrenで受け取ることができる
• 継承は使わなくていい

React の流儀 – React

• Step 1: UI をコンポーネントの階層構造に落とし込む
  • 分割しすぎはそれはそれでファイル数も増えて大変な気がする
  • まだそこまで分割するメリットはわかってない

　

• ここまでは分割しないこともある

  • Searchの部分としたの部分とか、多くても3つくらい

• Step 4: state をどこに配置するべきなのかを明確にする

  • いろんなところで使うStateは専用のコンポーネントをつくってもいい
    • そのコンポーネントでしか使わないStateをリフトアップする必要はない