LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nagai-sho(sho nagai)

2025/1/29 学習記録

Posted at

現状：

エンジニアへの未経験転職。
就職先も決まり、2月からひよこエンジニアに。

2025年は頑張ろうということで、2025年学習記録20日目。

内容は常に書き散らしのメモです、あしからず。

当面の目標：LPIC101,102合格

React

Component tree（コンポーネントツリー）

アプリケーションのUI構造を表現する階層的な構造。
ネストされたReactコンポーネントの関係性を視覚化したもの。

特徴

  1. 親子関係: 上位のコンポーネントが親となり、その中にネストされたコンポーネントが子となります[2]。
  2. データの流れ:
    • Props: 親コンポーネントから子コンポーネントへデータを渡します[2]。
    • State: 各コンポーネントが独自に管理する内部状態です[2]。
  3. レンダリングの影響: 親コンポーネントの再レンダリングは、その子コンポーネントの再レンダリングをトリガーする可能性があります[2]。
  4. UI最適化: コンポーネントツリーを理解することで、パフォーマンスやstate管理の問題をデバッグしやすくなります[3]。
  5. 可視化: ツリー構造を使用することで、複雑なUIの構造を理解しやすくなります[3]。

Citations:

[1] https://qiita.com/shino365/items/d696ac2b26ad3e53385b
[2] https://www.hypertextcandy.com/react-tutorial-03-props-and-state/
[3] https://ja.react.dev/learn/understanding-your-ui-as-a-tree
[4] https://zenn.dev/counterworks/articles/react-journey
[5] https://qiita.com/okr_/items/13750eb6eabfd7c4ae51
[6] https://ja.legacy.reactjs.org/docs/react-component.html
[7] https://note.com/kanidesign/n/n6e2c80ed66ed
[8] https://zenn.dev/koya_tech/articles/16d8b11b5062bd

Fiber tree（ファイバーツリー）

Reactの内部レンダリングエンジンの中核を成す重要な概念。

役割

  1. コンポーネント階層の表現
    • アプリケーションのコンポーネント構造を表現します[1]。
    • 各ノードがコンポーネントの状態、プロパティ、関係性を保持します[1]。
  2. インクリメンタルレンダリングの実現
    • レンダリング作業を小さな単位（ファイバー）に分割します[2]。
    • これにより、レンダリングの中断、再開、優先順位付けが可能になります[1][2]。
  3. 効率的な更新処理
    • 更新が必要な部分のみを特定し、最適化された更新を行います[5]。

構造

  1. ファイバーノード
    • 各ノードはReactコンポーネントに対応します[3]。
    • ノードには状態、プロパティ、副作用の情報が含まれます[1]。
  2. ツリー構造
    • 親子関係と兄弟関係を持つリンクドリスト形式で構築されます[3][5]。
  3. ダブルバッファリング
    • currentツリーとworkInProgressツリーの2つのインスタンスを維持します[5]。
    • currentは現在の表示状態、workInProgressは作業中の状態を表します。

挙動

  1. レンダリングフェーズ（作業フェーズ）
    • $$beginWork$$: コンポーネントのインスタンス化、renderメソッドの呼び出し、更新の比較を行います[9]。
    • $$completeWork$$: 副作用の設定、ホストインスタンスの作成を行います[9]。
    • このフェーズは中断可能で、優先度の高いタスクに制御を譲ることができます[2]。
  2. コミットフェーズ
    • $$commitWork$$: 実際のDOM更新を行います[9]。
    • このフェーズは同期的に実行され、中断されません[2]。
  3. 優先度ベースのスケジューリング
    • $$requestIdleCallback$$や$$requestAnimationFrame$$を使用して、更新の優先度を管理します[7]。
    • 高優先度のタスク（ユーザー入力など）を妨げることなく更新を処理できます[2]。
  4. 再帰的な処理からの脱却
    • スタックベースの再帰的な処理ではなく、リンクドリストを使用した反復的な処理を行います[5][9]。
    • これにより、処理の中断と再開が可能になります。

Citations:

[1] https://note.com/trytech/n/n0f6b1a0c94ae
[2] https://note.com/readytowork/n/n4c068224ef66
[3] https://zenn.dev/convers39/articles/ac0ac2cc2710b9
[4] https://zenn.dev/porokyu32/articles/960d9d6e45533b
[5] https://note.com/koki_kono/n/nb1e6a364ca6d
[6] https://speakerdeck.com/ytaisei/deep-dive-into-react-react-fiber-architecturenituite
[7] https://qiita.com/seya/items/a655adb340af3b6690b5
[8] https://html5experts.jp/shumpei-shiraishi/23265/
[9] https://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber

Fiber Node（ファイバーノード）

React Fiberアーキテクチャにおける基本的な作業単位。
ファイバーノードは、Reactの効率的なレンダリングと更新処理を可能にする重要な要素。
これにより、インクリメンタルレンダリングやスケジューリングが実現されている。

特徴

  1. コンポーネントの表現
    • React Elementに1対1で対応します[2]。
    • コンポーネントの状態、プロパティ、DOMを保持します[2][1]。
  2. データ構造
    • 子要素、兄弟要素、親要素へのリンクを持つ連結リスト形式です[2]。
    • type、props、key、effectTagなどの情報を含みます[3][4]。
  3. 更新処理
    • 差分比較に使用されます[2]。
    • レンダリングごとに再生成されず、更新情報を保持します[2][5]。
  4. 副作用の管理
    • effectTagフィールドを持ち、DOM操作などの副作用を追跡します[2]。
  5. ツリー構造の形成
    • ファイバーノードが連結されてFiber Treeを形成します[1][2]。
    • currentツリーとworkInProgressツリーの2つの状態を持ちます[2]。

Citations:

[1] https://note.com/trytech/n/n0f6b1a0c94ae
[2] https://zenn.dev/reo777/articles/025d6342c86980
[3] https://qiita.com/Asaminnn/items/68b5b614ba44e70c3d74
[4] https://note.com/koki_kono/n/nb1e6a364ca6d
[5] https://zenn.dev/porokyu32/articles/960d9d6e45533b
[6] https://qiita.com/seya/items/a655adb340af3b6690b5
[7] https://dotnetdevelopmentinfrastructure.osscons.jp/index.php
[8] https://postd.cc/react-fiber-architecture/

振り返り

jsx：javascript内にHTMLタグを記述できるReact専用の記法。
最終的にjavascriptのオブジェクトに変換される。＝React要素

HTMLの構造（jsx）
→React.createElement()関数に変換
→その関数が実行されたものがReact要素に変換
→オブジェクトに格納される。

ReactDOM

マウント＝何かに接続して利用可能な状態にすること。

関数で定義されたコンポーネント＝関数コンポーネント
propsを受け取り、jsxを返す関数。
先頭が小文字だと動かない。

コンポーネントは親子関係
propsという引数を子に渡すことができる
propsは読み取り専用、変更できない

React要素のツリーからコンポーネントのみを抽出したものをコンポーネントツリーと呼ぶ。

state（ステート）

コンポーネントの動的なデータを管理し、UIの更新を効率的に行うためのReactの重要な概念で、コンポーネント内で管理される可変の内部状態を指す。
stateの変更が発生すると、Reactは自動的にコンポーネントを再レンダリングして変更を反映する。

特徴

  1. コンポーネント固有のデータ
    • コンポーネント内でのみアクセス可能な変数のようなもの[1][3]
    • 他のコンポーネントから直接アクセスできない[3]
  2. 可変性
    • 値を変更可能なデータ[3]
    • 変更時にコンポーネントの再レンダリングをトリガー[1][3]
  3. 使用方法
    • 関数コンポーネントでは useState フックを使用[2][4]
    • クラスコンポーネントでは this.state として定義[3][5]
  4. 更新方法
    • 関数コンポーネント: useState が返す setter 関数を使用[2][4]
    • クラスコンポーネント: this.setState() メソッドを使用[3][5]
  5. 初期化
    • コンポーネントの初期レンダリング時に設定[4][5]
    • props から初期値を設定することも可能[5]

Stateとpropsの主な違い

  1. データの管理と所有権
    • State: コンポーネント内で管理される可変のデータ
    • Props: 親コンポーネントから渡される読み取り専用のデータ
  2. 変更可能性
    • State: コンポーネント内で変更可能（useStateフックやsetStateメソッドを使用）
    • Props: 変更不可（読み取り専用）
  3. スコープ
    • State: コンポーネント内でプライベートに保持される
    • Props: 親コンポーネントから子コンポーネントへ渡される
  4. 更新時の挙動
    • State: 変更時にコンポーネントの再レンダリングをトリガー
    • Props: 親コンポーネントで変更された場合、子コンポーネントの再レンダリングをトリガー
  5. 初期化
    • State: コンポーネント内で初期化される
    • Props: 親コンポーネントから初期値が渡される
  6. 用途
    • State: UIの状態や、コンポーネント固有のデータの管理に使用
    • Props: コンポーネント間でのデータの受け渡しに使用

Citations:

[1] https://zenn.dev/huraipan/articles/1c049c796f4698
[2] https://ja.react.dev/reference/react/useState
[3] https://qiita.com/shino365/items/41d757465514e7a17532
[4] https://ja.legacy.reactjs.org/docs/hooks-state.html
[5] https://www.to-r.net/media/react-tutorial07/
[6] https://qiita.com/sekikawa_a/items/8ab70f457ef73871419f
[7] https://tetoblog.org/2021/06/react-state/
[8] https://zenn.dev/reds/articles/8e321a942e4934

useState

Reactの関数コンポーネントで状態（state）を管理するためのフック。

基本構造

// 基本構造
const [state, setState] = useState(initialState);
// 例
const [count, setCount] = useState(0);
// 初期値に０を設定
  • state: 現在の状態値
  • setState: 状態を更新するための関数
  • initialState: 初期状態

useStateの特徴

  1. 状態の初期化

    • 数値、文字列、真偽値、オブジェクト、配列など、様々な型のデータを初期値として設定できます。

    • 初期値は静的な値だけでなく、関数も指定可能です：

      const [state, setState] = useState(() => expensiveComputation());

  2. 状態の更新

    • setState関数を使用して状態を更新します。

    • 新しい値を直接渡す方法：

      setState(newValue);

    • 前の状態に基づいて更新する方法：

      setState(prevState => computeNewState(prevState));

  3. 複数の状態

    • 1つのコンポーネント内で複数のuseStateを使用できます：

      const [count, setCount] = useState(0);
const [text, setText] = useState('');

  4. オブジェクトや配列の状態管理

    • オブジェクトや配列を状態として扱う場合、完全に新しいオブジェクトや配列を作成して更新する必要があります：

      const [user, setUser] = useState({ name: '', age: 0 });
setUser(prevUser => ({ ...prevUser, name: 'John' }));

  5. 型安全性（TypeScriptの場合）

    • ジェネリクスを使用して型を指定できます：

      const [user, setUser] = useState<User>({ name: '', age: 0 });

  6. パフォーマンスの最適化

    • 状態更新時に再レンダリングが発生するため、不要な更新を避けることが重要です。
    • Object.is()による比較で、前の状態と新しい状態が同じ場合、再レンダリングは行われません。

  7. 副作用との連携

    • useStateはしばしばuseEffectと組み合わせて使用され、状態の変更に応じて副作用を実行できます。

Citations:

[1] https://envader.plus/article/443
[2] https://qiita.com/KokiSakano/items/c16a8daf03acdbd6c911
[3] https://zenn.dev/chiba0115/articles/f4ede647419946
[4] https://qiita.com/seira/items/f063e262b1d57d7e78b4
[5] https://reffect.co.jp/react/react-hook-usestate-understand
[6] https://zenn.dev/yumix/articles/aad5753f1c9da6
[7] https://nakamuuu.blog/react-basic-usage-of-usestate/
[8] https://kinsta.com/jp/knowledgebase/usestate-react/

prevState

Reactのステート更新において、現在のステート値を参照するための概念。
主にuseStateフックのステート更新関数内で使用される。
非同期操作や複数の状態更新が連続して行われる場合に有効。

特徴

  1. 定義
    prevStateとは、「前の状態（previous state）」を指し、特に状態更新が非同期で行われるReactの内部処理で、正確な状態を保ちながら新しい状態を設定するために役立つ概念です。[1]
  2. 使用場面
  • カウンターやトグル機能など、複数回状態が変更される操作
  • 非同期の状態変更で、前の状態が正確に必要な場合
  • 状態が連続して変わる場面で、最後の結果が意図したものになっていない可能性を防ぐ
    [1]
  1. 利点
  • 状態の競合を防ぐ：非同期処理であっても、正しい前の状態を参照するため、複数の状態更新が競合することがありません。
  • 読みやすいコード：状態を直接更新するのではなく、prevStateを引数にした関数として表現することで、状態管理がより明確になります。
    [1]

使用例

  1. 使用方法
const Counter = () => {
  const [count, setCount] = useState(0);
  const countUP = () => {
    setCount(prevState => prevState + 1);
  }
  return (
    <div>
      <div>現在のカウント: {count}</div>
      <button onClick={countUP}>up</button>
    </div>
  );
};

この例では、setCount関数内でprevStateを使用して、現在のカウント値に1を加えています。これにより、複数の更新が連続して行われても、各更新が正確に前の状態を参照できます。

Citations:

[1] https://roa-run-dev.com/react-prevstate-basics/
[2] https://scrawledtechblog.com/usestate-base/
[3] https://reffect.co.jp/react/react-hook-usestate-understand
[4] https://aichi.blog/?p=3317
[5] https://ja.react.dev/reference/react/useState
[6] https://qiita.com/asameshiCode/items/d26a74a0eb0b23a0c711
[7] https://ja.legacy.reactjs.org/docs/hooks-reference.html
[8] https://qiita.com/Hashimoto-Noriaki/items/4d6a537495b5aa8b6b19
[9] https://zenn.dev/stin/articles/use-appropriate-api
[10] https://qiita.com/seira/items/f063e262b1d57d7e78b4

javascript

今日はここまで！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?