React中的函数组件使用useState

React中的函数组件使用useState

一个组件的显示形态可以由数据状态和外部参数所决定，而数据就是state

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用

举个例子

import { useState } from 'react'
const app = () => {
const [count,setCount] = useState(0)
function changeCount() {
  setCount(count => count++)
}
  return (
    <div>{count}</div>
    <button onClick={()=>changeCount}></button>
  )
}

通过点击按钮触发onClick事件，执行changeCount方法更新state状态，从而导致页面的视图更新。

如果直接修改count状态而不靠setCount，我们会发现页面不会有任何反应，但是state状态已经被改变了

这是因为React不像VUE2中调用Object.defineProperty数据响应式，或者VUE3调用Proxy监听数据变化

必须通过setCount方法来告知React组件state已经发生了改变

setCount有两种更新方式，举个例子：

import { useState } from 'react'
const app = () => {
const [count,setCount] = useState(0)
function changeCount() {
  setCount(count => count++)
}
function changeCount() {
  setCount(count++)
}
  return (
    <div>{count}</div>
    <button onClick={changeCount}></button>
    <button onClick={changeCount2}></button>
  )
}

一个是通过一个新的state值进行更新，另一个是通过函数式更新返回新的state，现在这两种写法没有区别，但是在异步更新时，区别就显现出来了

import { useState } from 'react'
const app = () => {
const [count,setCount] = useState(0)
function changeCount() {
    setTimeout(()=>{
        setCount(count => count++)
    },3000)
}
function changeCount() {
    setTimeout(()=>{
        setCount(count++)
    },3000)
}
  return (
    <div>{count}</div>
    <button onClick={changeCount}></button>
    <button onClick={changeCount2}></button>
  )
}

当设置为异步更新，点击按钮延迟到3s之后去调用setCount函数，当快速点击按钮时，也就是说在3s多次去触发更新，但是只有一次生效，因为 count 的值是没有变化的。而当使用函数式更新 state 的时候，这种问题就没有了，因为它可以获取之前的 state 值，也就是代码中的 count 每次都是最新的值。

其实这个特点和类组件中 setState 类似，可以接收一个新的 state 值更新，也可以函数式更新。如果新的 state 需要通过使用先前的 state 计算得出，那么就要使用函数式更新。因为setState更新可能是异步，当你在事件绑定中操作 state 的时候，setState更新就是异步的。

一般操作state，因为涉及到 state 的状态合并，react 认为当你在事件绑定中操作 state 是非常频繁的，所以为了节约性能 react 会把多次 setState 进行合并为一次，最后在一次性的更新 state，而定时器里面操作 state 是不会把多次合并为一次更新的。