【React】useStateでReactにレンダリングさせて画面更新してみた【Hook】

この記事は
Calendar for React | Advent Calendar 2021 - Qiita
の10日目です。

9日目は@swfzさんのこちらの記事でした。
swfz.hatenablog.com
canvasの可能性を感じますね！
あと画面をスマホ版に最適化するのも
面白そうです！

改めましてこんにちは！nomurabbitです。
この記事では、Reactにレンダリングさせて
アプリの画面を更新してみたいと思います。

レンダリングのトリガーには
useStateを使ってます！

propsとstateと画面表示の関係
Reactの画面表示プロセス
stateを変更して画面を更新してみた
参考

propsとstateと画面表示の関係

Reactの画面はコンポーネントと呼ばれる
アプリを構成する部品から成り立っています。

各コンポーネントはJSXと呼ばれる
Javascriptの構文で定義されており、
JSXに渡される引数（props）と
JSXの内部で処理される値（state）によって
画面の表示内容を変化させます。

今回はuseStateと呼ばれる
stateのセッターを使って値を変化させ
画面の表示内容を変えてみます。

Reactの画面表示プロセス

Reactはレンダリング、差分計算、DOMの更新という
３つのプロセスを経て画面を表示します。
この中で起点となるのがレンダリングのプロセスです。

レンダリングのプロセスをキックする方法は
いくつかあるのですが、今回はuseStateを使って
stateを変更する方法を使います。

あるコンポーネントでstateが変更されると
レンダリングがキックされ、Reactは
そのコンポーネントを起点に
子要素のコンポーネントを順次レンダリングします。

たとえばindex.tsxで
レンダリングがキックされたとすると
子要素であるApp.tsx以下すべての要素が
レンダリングの対象となるんですね。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ここでいうレンダリングとは
変更後の表示内容を各コンポーネントに
問い合わせる作業を指します。

末端までレンダリングが終わると
Reactは変更後の表示内容で
画面の仮想DOMを作ります。
この時点では仮想DOMの内容は、
実際の画面には変更はされていません。

その後、仮想DOMと現在のDOMを比較し、
差分として抽出されたコンポーネントの変更を
実際の画面に反映します。

stateを変更して画面を更新してみた

それでは実際にstateを変更して
画面を更新してみたいと思います。
ソースはこんな感じです。

const Home = () => {

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

  return (
    <ResponsiveDrawer>
      <div>
        <p>It's amplify test / home page.</p>
        <p>You clicked {count} times count</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    </ResponsiveDrawer>
  );
}

setCountというセッターを使って
countというstateを変更していますね。

実行結果はこんな感じです。

次にstateではない変数を変更してみます。
ソースはこんな感じです。

const Home = () => {

  let count = 0;

  return (
    <ResponsiveDrawer>
      <div>
        <p>It's amplify test / home page.</p>
        <p>You clicked {count} times count</p>
        <button onClick={() => count += 1}>
          Click me
        </button>
      </div>
    </ResponsiveDrawer>
  );
}