いきなり色々すっとばしてやろうということが間違いな気がしてきたので、必要そうなことをコツコツとやっていきましょう。

Reactの基礎中の基礎はUdemyで学んだつもりなので、ちょっと分かりづらい、React Hooksをテーマに記事化していく。世の中にこの手のブログは星の数ほどあるだろうけど・・・。

まずは基本の使い方

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

  const countUp = () => {
    setCount(count + 1);
  };

  const countDown = () => {
    setCount(count - 1);
  };

  return (
    <>
      <div>{count}</div>
      <div>
        <button onClick={countUp}>countup</button>
      </div>
      <div>
        <button onClick={countDown}>countDown</button>
      </div>
    </>
  );

countUpを押すと、数が増えて、countDownを押すと数が減る。

setCountを使って、countの値を変化させるのがuseStateの使い方。

なんでこんな面倒なことせなあかんのか

const Test = () => {
  let pan:number=0;
    const countUp = () =>{
      pan=pan+1;
      console.log(pan);
    }
  return (
      <>
      <h1>おまえは今まで食ったパンの枚数をおぼえているのか?</h1>
      <h1>えっと・・・{pan}枚です・・・。</h1>
      <button onClick={countUp}>パンの枚数を指定してね！</button>
    </>
  );
};

パンの枚数を指定してね！をクリックしても{pan}部は更新されない。

Testコンポーネントを再レンダリングしないと変更が反映されないためである。

ちなみに、コンソールログのpanはカウントアップされている。

だけど、再レンダリングすると、panには0が入っているので、結局0となってしまうジレンマ。

再レンダリングしつつ状態を保持できるように、useStateが存在している。