1 useState
2 useEffect
3 useContext
4 useReducer
1 useState 保存组件状态
useState
的作用是用来声明与更新变量,函数接收的参数是我们声明变量的初始值。
它返回了一个数组,第1项是当前状态值,第2项是可以改变状态值的方法函数。
1.1 声明变量
声明一个变量 count,初始值设为 0。
同时提供了一个可以修改 count 的函数 setCount。
const [count, setCount] = useState(0)
1.2 使用变量
使用变量非常简单,直接使用或者用花括号包起来即可。
<div>数量:{
count}</div>
1.3 更新状态
通过调用修改 count 的函数 setCount,传入新的值即可。
setCount(count + 1)
1.4 完整示例
import React, {
useState } from 'react'
const Test = () => {
const [count, setCount] = useState(0)
const addCount = () => {
// setCount(count + 1)// 第一更新种方式
setCount(count => count + 1)// 第二种更新方式
}
return (
<>
<div>数量:{
count}</div>
<button onClick={
addCount}>加1</button>
</>
)
}
export default Test