React-Hooks：useState的一些用法

1.useState-处理表单元素

处理表单元素这个能力无非就是我们要获取到表单的值

那么我们就要运用useState返回状态和修改状态的功能

这样我们实现功能的思路：

1.用useState初始化内容和写修改内容的函数

2.向input元素上设置value和onChange属性

import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
  const [content, setContent] = useState('')
  return (
    <div>
      {content}
      <input value={content} onChange={(e) => setContent(e.target.value)} />
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

2.useState-setXXXX回调函数格式

格式1：传入值

useState(0)  useState('abc')

格式2：传入回调

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

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

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

了解了格式后，在什么场景如何使用：

1.状态是普通数据：当状态是一个普通数据时（如数字和字符串等）都可以直接使用格式1

2.是状态的修改回调函数时 ：状态需要一些计算得到这里使用格式2

这里以一个代码段为例

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