react函数式组件的状态

1.useState为函数式组件提供状态(state)

步骤

    1)导入。 useState 函数

       import  useState from 'react'

 调用useState传入初始值

 返回值：它是一个数组，修改状态的函数，以及要修改的状态

注意：此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象

使用数组结构来简化代码，如下所示

const [count, setCount] = useState(0) 

useState(0)里面的值是初始值

2.useState 两种格式

格式1：传入值

const [count, setCount]=useState(10)

格式2：传入回调

const  [count, setCount]=useState((原值)=>{return 新值})

setXXX的参数可以是回调

使用场景：状态需要迭代累计，如下所示

setXXXXX((上一次的值) => { return 新值 })

 setCount(count => {
        if (count === 1) {
          clearInterval(timer)
          setCount(10)
        }
        return count - 1
      })

// eslint-disable-next-line no-use-before-define
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
export default function App () {
  const [count, setCount] = useState(10)
  const hClick = () => {
    //
    const timer = setInterval(() => {
      setCount(count => {
        if (count === 1) {
          clearInterval(timer)
          setCount(10)
        }
        return count - 1
      })
    }, 1000)
    // 错误写法 定时器不能写在改变状态的函数里面
    //     setCount(setInterval(() => {
    //       // eslint-disable-next-line no-unused-expressions
    //       count => count - 1
    //     }, 1000))
  }
  return (
        <div>
            <p>count:{count}</p>
            <button type="button" onClick={() => {
              hClick()
            }}>倒计时</button>
        </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))