提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

useState的使用

2023-02-18 16:37:31 时间

# React Hook - useSate

在 React 的函数式组件当中，是没有状态的，但是使用 React 提供的 Hook 可以让函数式组件拥有状态。

# 使用 useState() 进行状态管理

无状态的函数组件没有状态，如下代码所示：

function example(){
  return <h1>我是一个函数式组件</h1>
}

如果需要给这个组件添加一个状态，就需要用到 React 提供的 useSate() 这个 Hook，它的使用方式如下：

import { useState } from "react";

function App1() {
  const [msg, setState] = useState("Hello React");

  const fn = () => {
    setState("测试");
  };

  return (
    <>
      <h1 onClick={fn}>{msg},你好</h1>
    </>
  );
}

export default App1;

使用 useState() 可以在函数式组件当中声明状态，useState 函数的返回值是一个数组，数组的第一个位置就是声明的状态的值，第二个位置为一个函数，使用该函数能够对声明的状态进行改变，直接改变状态页面是没办法更新的。

相关文章