react函数组件中的useState

为什么要有hooks

1. 有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 Hooks 可以为函数组件提供了状态。
2. Hooks 是一些可以让你在函数组件里“钩入” 状态 及生命周期等特性的函数
3. 相比类组件，hooks+函数组件能更好的胜任这个工作

1.useState

        useState能为函数组件提供状态

使用步骤

1. 导入useState函数
2. 调用useStatae函数,可以传入初始值,返回状态与修改状态的函数
3. 使用
   1. 可以在jsx中展示状态(比类组件的state好用不用写一大堆前缀)
   2. 特定的时机调用修改状态的函数来改变状态

代码示例

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

export default function Niubi () {
  const [state, setstate] = useState(0)
  return (
    <div>
      <h1>第一个hooks</h1>
      <span>我现在是:{state}</span>
      <button
        onClick={() => {
          setstate(state + 1)
        }}>
        +1
      </button>
    </div>
  )
}

ReactDOM.render(<Niubi />, document.getElementById('root'))

• 参数:可以在useState()中传入值,传入的值就是初始值
• 返回值:是个数组 里面包含两个值 一个是状态值(state) 一个是修改该状态的函数
• 可以使用数组结构简化代码 

useState-set回调函数格式

useState 两种格式

格式1：传入值

useState(0) useState('abc')

格式2：传入回调

useState(() => { return 初始值 })

1. 回调函数的返回值就是状态的当前值

2. 回调函数只会触发一次

使用场景

格式1：传入值

如果状态就是一个普通的数据（比如，字符串、数字、数组等）都可以直接使用 useState(普通的数据)

格式2：传入回调

1. 初始状态需要经过一些计算得到。 useState(()=>{这里有一些计算， return 结果}))

setXXX的参数可以是回调

状态需要迭代累计。 setXXXXX((上一次的值) => { return 新值 })

import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [count, setCount] = useState(0)
  const hClick1 = () => {
    setCount(count+1)
    setCount(count+1)
    setCount(count+1)
  }
  const hClick2 = () => {
   
  }
  
  return (
    <div>
      count:{count}
      <button onClick={hClick1}>多次连续setCount-值</button>
      <button onClick={hClick2}>多次连续setCount-值</button>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))