React的hooks中的useState基础使用

useState下状态的读取和修改

1.首先导入useState函数

2.调用useState函数并传入初始值

代码示例：

import { useState } from 'react'

function App() {
  //参数1，参数2名字可以自定义，但是顺序不能改变，0为传入的初始值
   
  const [num, setNum] = useState(0)
  return (
    <button onClick={() => { setCount(num + 1) }}>{num}</button>
  )
}
export default App

useState的组件更新

每次调用setNum函数整个组件都会重新渲染一次，useState的初始值只会在首次渲染时生效，每次更新都是状态的新值

import { useState } from 'react'

function App() {
  const [num, setNum] = useState(0)
  // 打印测试
  console.log(num)
  return (
    <button onClick={() => { setNum(num+ 1) }}>{num}</button>
  )
}
export default App

useState的使用规则

1.只能在函数组件中使用

2.不能在其他函数中使用，也不能在if/for中使用

3.useState 函数可以执行多次，每次执行都相互独立，每调用一次为函数组件提供一个状态

代码示例：

import { useState } from 'react'

function App () {
  const [num, setNum] = useState(0)
  const [onoff, setOnoff] = useState(true)
  function test () {
    setOnoff(!onoff)
    console.log(onoff)
  }
  return (
    <div>
      <button onClick={() => { setNum(num + 1) }}>{num}</button>
      <button onClick={test}>onoff:{onoff}</button>
    </div>

  )
}
export default App