react函数式组件的状态

最新推荐文章于 2024-12-02 13:50:19 发布

yezi153

最新推荐文章于 2024-12-02 13:50:19 发布

阅读量1.3k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yezi153/article/details/121275579

版权

本文详细介绍了React函数式组件中的useState Hook，包括其基本用法、两种格式以及在倒计时场景中的应用。通过例子展示了如何初始化状态、更新状态以及在状态变更中清除定时器。强调了状态迭代累计的处理方式，并给出了错误写法的示例，帮助读者深入理解useState的工作原理。

摘要由CSDN通过智能技术生成

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'))