Typescript 使用钩子useState和声明变量之间的区别

两者之间有什么区别

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

及

关于count变量的语义

---

除了setCount方法的存在，使用useState钩子还有什么好处？

主要原因是，如果使用setCount而不使用useState的计数，视图将不知道它必须重新渲染，它们一起使用，因此它知道如何同步

每次使用setCount时，它都会再次执行完整渲染

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

  function onClick() {
    setCount(count+1);
  }

  return (
    <div className="App">
      <h1 onClick={onClick}>{count}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

  function onClick() {
    setCount(count+1);
  }

  return (
    <div className="App">
      <h1 onClick={onClick}>{count}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

  function onClick() {
    setCount(count+1);
  }

  return (
    <div className="App">
      <h1 onClick={onClick}>{count}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);