React Hooks
1. useState
useState这个函数接收的参数是state的初始值,它返回一个数组
该数组的第一个值表示当前状态值
第二个值表示更新状态值的函数
let countArray = useState(0)
let count = countArray[0]
let setCount = countArray[1]
等价于
使用ES6的数组解构语法糖
const [count, setCount] = useState(0)
{count}显示状态值
setCount更新状态值,有两种写法
一种是直接传入值setCount(count+1)
另外一种是传入箭头函数
setCount((c) => c + 1)
export default function UseStatePage() {
const [count, setCount] = useState(0)
return <div>
<div>count = {count}</div>
<p style={{ marginTop: '20px' }}>写法一,直接传入数值</p>
<button onClick={() => setCount(count + 1)}>add</button>
<button onClick={() => setCount(count - 1)}>minus</button>
<p style={{ marginTop: '20px' }}>写法二,参数为箭头函数</p>
<button onClick={() => setCount((c) => c + 1)}>add</button>
<button onClick={() => setCount((c) => c - 1)}>minus</button>
</div>
}