react レンダリング 仕組み　

はじめに

今回は、レンダリングについて書こうと思います。

以下、Reactについて書いたのでよかったら見てください笑

• React基礎

• 入れ子

レンダリングとは

レンダリングとは、コンポーネントがHTML要素として画面に表示される過程のこと。

例えば、データや状態が更新されると、自動的に変更部分が再レンダリングされ、画面に反映される仕組みです！

レンダリングの例

シンプルなカウンターアプリで、ボタンをクリックするたびにカウントが増え、

画面が再レンダリングされて最新のカウントを画面に表示するコードです。

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
  // カウントの状態を定義
  const [count, setCount] = useState(0);

  // カウントを増やす関数
  const increaseCount = () => {
    setCount(count + 1); // 状態を更新
  };

  console.log("Counter component rendering..."); // コンソールでレンダリングの確認

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={increaseCount}>カウントを増やす</button>
    </div>
  );
};

export default Counter;

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

export default App;

解説

1. Counterコンポーネント

   ・カウント状態を管理するために、useStateフックを使ってcount状態を作成。

   ・increaseCount関数がボタンクリックイベントに呼ばれると、setCountによってcountの値が更新されます。

   ・countが更新されるたびに、Counterコンポーネントは再レンダリングされ、新しい値が<h1>タグに表示される。

2. レンダリングの流れ

   ・ページが初めて読み込まれたとき、Counterコンポーネントが一度レンダリングされ、countの初期値(0)が表示される。

   ・ボタンをクリックすると、setCountよりcountが１個増え、再レンダリングされて画面に表示される。

ポイント

• 状態管理: useSateで管理されている状態(count)が変わるたびに、Ractはそのコンポーネントを再レンダリングします。

• レンダリングの効率化: Ractは、状態が更新される部分だけを再レンダリングする「仮想DOM」を使うため、

  効率よく画面を更新できる。