Question

两者之间有什么区别

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

和

function Example() {
  const count = 0;

关于计数变量的语义？

除了存在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);

使用hook useState和声明变量

1 个答案: