2025年Reat 中的 useState 钩子函数

科技前沿 • 2025-03-01 19:09 • 阅读 33

大家好，我是讯享网，很高兴认识大家。

useState 钩子函数

1、useState 钩子函数说明

useState 钩子函数主要是为当前组件声明可控的变量，并且当修改此变量值时，React 就会重新渲染当前组件。

useState 的语法如下：const [state, setState] = useState(initialState)。

2、useState 钩子函数中的陷阱

2.1 useState 必须按照顺序执行

在初始渲染期间，useState 钩子函数都是按照顺序执行的，所以 useState 不能放在其他函数或者判断中，这样做的话会导致异常。例如下面的代码是错误的做法：

const [count, setCount] = useState<number>(0); if (count > 1) { 
    useState<number>(1); }

讯享网

2.2 useState 钩子函数中 setState 函数的传值参数不同会有不同的效果

当 setState 传入的值是 state 的话，则是在 state 的旧值基础进行操作后在修改值，即具有惰性。例如如下的代码：

讯享网const [count, setCount] = useState<number>(0); function decrementCount() { 
    setCount(count - 1); setCount(count - 1); } return ( <div> <button onClick={ 
   decrementCount}>-</button> <span>{ 
   count}</span> <button>+</button> </div> );

上面的例子中，setCount 虽然调用了两次，但是 count 的值只会减一。

讯享网

当 setState 传入的是函数并且返回操作后的值时，则会立即更新 state 的值。例如如下的代码：

const [count, setCount] = useState<number>(0); function decrementCount() { 
    setCount((preVal) => preVal - 1); setCount((preVal) => preVal - 1); } return ( <div> <button onClick={ 
   decrementCount}>-</button> <span>{ 
   count}</span> <button>+</button> </div> );

上面的例子中， setCount 调用了两次，最后的 count 的值会减去 2 次。

2.3 useState 定义的变量为对象的时候需要注意的问题

在使用 useState 定义对象的时候不像类组件会帮你合并对象变量，useState 不会帮你对象变量的合并。例如如下代码：

讯享网const [tempObj, setTempObj] = useState<{ 
      id: number; address: string; summary?: string; }>({ 
    id: 1, address: "address", summary: "this is demo" }); function setTempObj() { 
    setTempObj({ 
    id: 2, address: "address1" }); } return ( <div> <button onClick={ 
   setTempObj}>修改属性</button> <p>id:{ 
   tempObj.id}</p> <p>address:{ 
   tempObj.address}</p> <p>summary:{ 
   tempObj.summary}</p> <p>{ 
   JSON.stringify(tempObj)}</p> </div> );

在上面的例子中，调用了 setTempObj 方法后 tempObj 的属性值会改为两个，跟之前的不一样。假如需要保持原来对象的属性值的话可以这样做：

function setTemoObj() { 
    setTempObj({ 
    ...tempObj, id: 2, address: "address1" }); }