useState的使用
# React Hook - useSate
在 React 的函数式组件当中,是没有状态的,但是使用 React 提供的 Hook 可以让函数式组件拥有状态。
# 使用 useState()
进行状态管理
无状态的函数组件没有状态,如下代码所示:
function example(){
return <h1>我是一个函数式组件</h1>
}
1
2
3
2
3
如果需要给这个组件添加一个状态,就需要用到 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 useState()
可以在函数式组件当中声明状态,useState
函数的返回值是一个数组,数组的第一个位置就是声明的状态的值,第二个位置为一个函数,使用该函数能够对声明的状态进行改变,直接改变状态页面是没办法更新的。
帮助我修改此页面 (opens new window)
上次更新: 2022/09/12, 15:00:20