React基础之useState

useState是一个ReactHook(函数)，它允许我们向组件添加一个状态变量，从而控制组件的渲染效果

import { useState } from "react"

//使用useState实现计数器按钮

function App() {

  //count是状态变量 setcount是修改变量的方法

const[count,setCount]= useState(0)

//点击事件回调

const handleClick=()=>{

  //使用传入的新值修改Count，重现使用新的count来渲染UI

  setCount(count+1)

}

  return(

    <div className="App">

      <button onClick={handleClick}>{count}button>

    div>

  )

}

export default App

修改状态的规则

状态不可变，状态是自读的，我们应该是替换它而不是修改它，直接修改状态不能引发视图更新

import { useState } from "react"

//使用useState实现计数器按钮

function App() {

  //count是状态变量 setcount是修改变量的方法

const[count,setCount]= useState(0)

//点击事件回调

const handleClick=()=>{

  //我们直接修改这个值

  count++

  setCount(count)//是不会触发视图更新的

}

  return(

    <div className="App">

      <button onClick={handleClick}>{count}button>

    div>

  )

}

export default App

修改对象状态

对于对象类型的状态数据，应该传递一个set一个全新的对象来进行修改

import { useState } from "react"

//使用useState实现计数器按钮

function App() {

//修改对象状态

const [form,setForm]=useState({name:'jack'})

const changeFOrm=()=>{

  //错误的写法

  // form.name='jorn'

  //正确的写法

  setForm({

    ...form,

    name:'jorn'

  })

}

  return(

    <div className="App">

      <button onClick={changeFOrm}>{form.name}button>

    div>

  )

}

export default App