【React】关于useState

2 年 ago
清, 扬
1 minute

首先

我們來寫一個備忘錄，談一談React的基礎之一 – useState。

“useState是什么”

useState是React框架提供的一个钩子（Hook）。通过使用useState钩子，可以在React组件内管理状态（state）。

状态是指组件持有的数据，类似于组件内的变量。当状态的值发生变化时，React会自动重新渲染组件并更新用户界面。

示例代码

我会用这段代码进行解释。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const countUp = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={countUp}>カウントアップ</button>
    </div>
  );
}

解释

首先，使用以下代码定义useState。

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

在方括号中的count类似于此函数中使用的变量。
在方括号中的setCount是用于改变count状态的函数。
useState(0)用于设置方括号中count的初始值。

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

在这个函数中，通过调用[]内的setCount函数来改变count变量的值。
然后，在以下代码中，当按钮被点击时，调用countUp()函数。

<p>{count}</p>
<button onClick={countUp}>カウントアップ</button>

在上述代码中，每次按下按钮时，屏幕将重新渲染，并且变量{count}应该递增1。

最后

如果方便的话，还有其他的文章可以阅读。

 

bannerAds