Reat 中的 useState 钩子函数

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" });
}