なぜUSENTを使用して反応するか?

私たちが反応してUSENDフックを使用しない場合はどうなりますか?
例では、1つずつインクリメントするカウンターボタンを作成したいとしましょう.
不動産なしで
以下のコードでは、ボタンをクリックしてカウンタをインクリメントしようとすると、カウントは変更されませんので、反応は、一度だけ成分をレンダリングし、それが再レンダリングされない状態の変更がないので、カウントは画面上で0に残ります.
コンソールで.ログ1つのカウントをクリックしてインクリメントされて見ることができます.

import React from "react";

export default function MyComponent() {
  let count = 0;
  const setCount = () => {
  count++;
  console.log(count);
   }
  return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {setCount}>{count}</button>
    </div>
  );
}

USENTで
以下のコードでは、1つのボタンをクリックしてカウントを変更しようとすると、カウントが変更されますので、一度、それがマウントされたときに、コンポーネントをレンダリングし、それが再レンダリングされる状態の変化があるので、カウントは画面上にインクリメントされます.

import React, { useState } from "react";

export default function MyComponent() {
const[count, setCount] = useState(0);

return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {() => {
        setCount(count + 1);
      }}>{count}</button>
    </div>
  );
}

つは常にDOMを直接操作することができますし、画面上のカウンタをインクリメントすることもできますが、反応を使用する際にはポイントがありません.