【React】hooks 之 useState

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