持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言

对于使用过react的小伙伴来说，useState() 这个 hooks函数并不陌生，可以说是在函数式组件中的一个利器。它接收一个初始化的state，返回是一个数组，数组里面有两个元素，第一个元素是当前状态值和另外一个更新改值的方法。

useState这个hook函数做了什么

正如上面我们说到，useState可以给函数组件添加状态，函数组件中的useState可以生成一系列与其组件相关联的状态，并且传入子组件，子组件也会共享父组件的状态。所以什么时候用这个呢？它对组件自身的状态很有用，但是随项目越大会考虑其它的状态管理方案。

React声明状态

useState是react的命名式输出，可以这样写

import { useState} from "react"

一个useState一次只能声明一个变量，所以往往在一个函数式组件中含有多个useState命名的变量。在初始化时，会将第一个参数作为当前状态的值，如果第一个是个函数也将被执行。而setState函数用于更新state的状态。状态一经改变，无论是子组件中还是自身组件中所引用的状态值都将被改变。

更新状态

第一个值只能是在组件的初始化渲染时起作用，后续的改变会被忽略。如果修改的值和原来的值是一样的，也是不会触发react触发更新的，react使用的Object.is比较算法来比较state的。当使用对象时，很容易出现错误，例如：

const Message = ()=>{
   const [message,setMessage]  = useState({message:""})
   return <>
     {message}
     <input type="text" value={message.message} onChange={(e)=>{
      messgae.message = e.target.value;
      setMessage(message)
     }}>
     
     </input>
   
   </>
}

这个例子的输入框在输入时,并不会出发页面上的message更新，在setMessage时没有创建一个新的对象，而是直接在现有的对象上直接修改。为了能够正确执行并渲染正确，需要修改一下：

const Message = ()=>{
   const [message,setMessage]  = useState({message:""})
   return <>
     {message}
     <input type="text" value={message.message} onChange={(e)=>{
      const newMessage = {message:e.target.value}
      setMessage(newMessage)
     }}>
     
     </input>
   
   </>
}

这样就能正常执行并渲染了。通过这个例子能够让我们看到：

函数是组件中使用useState的更新方法是直接替换状态对象（对于引入类型而言）
替换状态对象时可能会出现原有属性并未包含在新的对象之中，可以使用扩展运算符或者Object.assign将状态中的属性复制到新的对象中。

自己对于React中useState的理解

前言

useState这个hook函数做了什么

React声明状态

更新状态