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