Reactの公式Doc「react.dev」を読んでの要点まとめ

Reactの新しいDocが 2023 3/17に正式リリースされました日本語訳もかなり進んでいるようで、ほとんどの部分は日本語で読むことができます。 URL → https://ja.react.dev/ 2

Learn Reactの部分を読んでみたので、読んでの気づきや知ったことをいろいろ語っていこうかと思います。 3

1. 2. 3. 4. おしながき根本的な思想とか useState, useRefについて useEffectは基本的に使わない RSC
(React Server Component) とは

1. 根本的な思想とか Reactは「純粋関数」の概念に基づいて設計されている。 5 「純粋関数」とは、同じ入力が与えられた場合、同じ結果を返す関数 1 + 1 は必ず
2 が返るし、計算式が同じである限りずっと 2 が返る。

6 参照 : UIの記述 / コンポーネントを純粋に保つ

7 参照 : UIの記述 / コンポーネントを純粋に保つ let guest = 0;
function Cup() { // Bad: changing a preexisting variable! guest = guest + 1; return <h2>Tea cup for guest #{guest}</h2>; } export default function TeaSet() { return ( <> <Cup /> <Cup /> <Cup /> </> ); } 例えば、左のようなコードの場合普通にCupコンポーネントを呼び出しているだけなのに結果が以下のようにそれぞれで変わります

8 この「純粋じゃないコンポーネント」を検出するために、 Reactでは Strict Modeという機能が提供されている。 StrictModeは純粋ではない関数を検出するためのもの。開発環境でのみレンダリングが2回走る = 2回のレンダリングで別々の出力がされる関数を炙り出す。 useEffectなどの「副作用」は最後の手段。
コンポーネントは可能な限りとにかく純粋関数で！と結構口酸っぱく記述されている。

1. 根本的な思想とか JSX = Reactってこと？ 9 答えは「No」 - JSXはJavaScriptの拡張 (言語の拡張、正式名称は
JavaScript Syntax Extention) - ReactはJavaScriptのライブラリつまり、Reactを使わないまま、JSXだけで使うことも可能

10 JSX記法はなんで親のタグで囲むのか <> <h1>Hedy Lamarr's Todos</h1> <img src="https://i.imgur.com/yXOvdOSs.j pg" alt="Hedy
Lamarr" class="photo" > <ul> ... </ul> </> React書き始めたら最初にハマるポイント厳密にはReactのエラーではなく、JSXのエラー Returnの中身は1つのタグにラップされている状態でなければいけない理由としては、内部でプレーンな JavaScriptオブジェクトに変換されているため。複数のオブジェクトを関数の戻り値として返したい場合、配列にラップするなどして返すのと同じ。ひとつの親要素 = ひとつの戻り値

2. useState, useRefについて state = 変数？ 11 答えは「No」・通常の変数は関数が終了したら消えてしまう・stateはその特定のレンダリングに対する「スナップショット」である

12 具体的にいうと？ import { useState } from 'react'; export default
function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) } ボタンをクリックしたら値がいくつ増えるでしょう？

13 具体的にいうと？ import { useState } from 'react'; export default
function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) } 正解は「1増えるだけ」これは書き換えると、以下のような形になる <button onClick={() => { setNumber(0 + 1); setNumber(0 + 1); setNumber(0 + 1); }}>+3</button> setNumberが実行され、stateの中身が変わらなければ numberはずっと0のまま

14 State (のオブジェクト) を書き換えることは、実際は可能でもそれだけではレンダリングが実行されないので、画面表示は何も変わらない Set関数を使うことで、次のレンダリングの「スナップショット」を作成する stateとして格納する全てのJavaScriptオブジェクトは読み取り専用として扱う必要があるともいえる以下のようなコードで、stateのオブジェクトは技術的に変更することができるが、やるべきではないどうしても必要な場合、Immerというライブラリを使用することで書き換える。Proxyという特殊なタイプのオブジェクト
が作成され、何を行なったのかを「記録」してくれる

2. useState, useRefについて useRefってどんな時に使う？ 15 「避難ハッチ」という項目にある。頻繁に必要としない想定・currentという単一のプロパティを持つプレーンなJavaScriptオブジェクト・stateと違い、refのcurrentを書き換えても再レンダリングはトリガーされない・宣言的であるReactで手続き的にDOM操作を行いたい場合に用いられる

16 refの使い方アンチパターン import { useState, useRef } from 'react'; export
default function Counter() { const [show, setShow] = useState(true); const ref = useRef(null); return ( <div> <button onClick={() => { setShow(!show); }}> Toggle with setState </button> <button onClick={() => { ref.current.remove(); }}> Remove from the DOM </button> {show && <p ref={ref}>Hello world</p>} </div> ); } 左のコードでは、refを使ってDOMを直接操作（削除）しています。「Remove from the DOM」ボタンを押すと、下の Hello Worldの表示は消えてしまいます。この状態で、「Toggle with setState」ボタンを押すとどうなる？

17 Crash！ Reactが管理するDOMノードは、refから直接変更しない変更する場合はフォーカスやスクロールなどの「非破壊的なアクション」にとどめる

3. useEffectは基本的に使わない例えば、以下のようなコード 18

19 絶対こう書いた方がシンプルですね既存のpropsやstateから計算できるものは、stateに入れずレンダリング中に計算する。 Propsが変更された際にstateをリセットしたい、一部のstateを調整したい、といったシーンでも、基本的にはuseEffectを使用せずレンダー中の計算を念頭におくとシンプルになる。

4. RSC (React Server Component) とは最近のReactについて 20 - RSC
(React Server Component) という概念の登場 - RSCの世界観ではReactのコンポーネントはデフォルトでサーバーサイドでレンダリングされます - つまりこれまでのuseStateやらuseEffectやらは使えません - もちろん完全に使えなくなるわけではなく、従来通りのクライアントサイドコンポーネントとして扱いたい場合は、モジュールに対して ’use client’ という記述をします - コンポーネントが直接dbにデータを取りに行く、ようなことも可能（今までReact触ってきた人から見ると結構衝撃） - コンポーネントをサーバーサイドでレンダリングすることで、どんなメリットがあるの？ - クライアントでのJavaScriptのバンドルサイズが減る = パフォーマンスの向上 = UXの向上 - バンドルとは変換のこと。ReactやNext.js, TypeScriptなどは最終的にJavaScriptになる。このバンドルされたJavaScriptが大きくなるとページロードなどの時間が長くなる。

4. RSC (React Server Component) とは最近のReactについて 21 これまでReactでアプリケーション開発をする時は、データアクセスの方法やデータをどこに保存するのかを決めることが悩みのタネになっていた。
→ 大量にあるサードパーティーライブラリを要件に沿って最適なものを選択しなければいけないこのデータのアクセス・管理周りをReactで標準化する React Server Componentが成熟した先には、かなり面白い世界観になっていそう変化が早すぎてついていくのはかなり大変。世の中のスーパーエンジニア等の記事を読んだり、公式追っかけて日々知識を入れていかないといけない。

Thanks! 22

以下スクラップ 24 調査足りてないものもあるので参考までに …

25 useEffectが2回実行される？ Docより、以下のように依存配列が”[]”の場合 useEffect内の関数が2度実行されている例が記載されています。 ※ 依存配列 = useEffectの第2引数の配列。[] の場合は画面に初めて表示される時のみ、実行される

26 Reactの開発用機能（React18以降）・前述したStrictModeに新規追加された機能。初回レンダリング時に1度コンポーネントのマウントとアンマウントを行う・この挙動は開発モード時のみ。本番用にビルドしたものは影響がない・クリーンアップ関数がちゃんと実装されているか？ということを確認するために追加されている ※ マウントとは？コンポーネント
(DOMノードが作成) され、DOMに出力されるプロセス

4. その他「へぇ〜」となったことコンポーネントがコンポーネントをネストする 27 ・明確に「定義をネストしないでください」と書かれていた・現場でちょいちょい見て「これええんか？」となってたのでスッキリ・全てのコンポーネントはトップレベルで定義するのが吉のよう

4. その他「へぇ〜」となったことオブジェクトは実際にはネストされない 28 ・ネストされているように見えるオブジェクトは、実際にはいろんなオブジェクトの集合体・実態はプロパティでお互いを「参照」している

4. RSC (React Server Component) とは最近のReactについて 29 - RSC
(React Server Component) という概念の登場 - RSCの世界観ではReactのコンポーネントはデフォルトでサーバーサイドでレンダリングされます - つまりこれまでのuseStateやらuseEffectやらは使えません - もちろん完全に使えなくなるわけではなく、従来通りのクライアントサイドコンポーネントとして扱いたい場合は、モジュールに対して ’use client’ という記述をします - コンポーネントが直接dbにデータを取りに行く、ようなことも可能（今までReact触ってきた人から見ると結構衝撃） - コンポーネントをサーバーサイドでレンダリングすることで、どんなメリットがあるの？ - JavaScriptのバンドルサイズが減る = パフォーマンスの向上 = UXの向上 - たとえばブログのコードブロックはいろんな言語に合わせてシンタックスハイライトを行うので、JSのバンドルサイズは大きくなりがち - RSCを使えばJSのバンドルサイズは (その分) ゼロになる！（Brightというパッケージが出ているよう）

メモ RSC 30

メモ RSC 31

メモ RSC 32

メモ RSC 33

Reactの公式Doc「react.dev」を読んでの要点まとめ

Reactの公式Doc「react.dev」を読んでの要点まとめ

KeitaUenishi

More Decks by KeitaUenishi

Other Decks in Technology

Featured

Transcript