Разница между использованием хука useState и объявлением переменной

Question

В чем разница между

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

и

function Example() {
  const count = 0;

относительно семантики переменной count?

В дополнение к существованию setCountметод, каковы преимущества использования ловушки useState?

Answer 1

Основная причина заключается в том, что если вы используете 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 = 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);