React 基础面试题, 如何使用 React 的 useState?请举例说明

Step 1

Q:: React 的 useState 是什么？如何使用？

A:: React 的 useState 是一个 Hook，它允许你在函数组件中添加状态。使用时，可以通过解构赋值获取状态值和更新状态的函数。使用示例：const [count, setCount] = useState(0); 这段代码声明了一个名为 count 的状态变量，并初始化为 0，同时 setCount 是用来更新 count 的函数。

Step 2

Q:: 如何在 useState 中处理对象或数组？

A:: 当使用 useState 管理对象或数组时，更新状态时必须创建该对象或数组的新副本。例如：const [user, setUser] = useState({ name: '', age: 0 });，更新时需这样操作：setUser(prevUser => ({ ...prevUser, age: 30 }));。通过扩展运算符 ...，我们确保不会直接修改原来的状态。

Step 3

Q:: useState 与类组件中的 this.setState 有什么不同？

A:: useState 是 React 函数组件中的 Hook，this.setState 是类组件中的方法。useState 返回一个状态变量和一个更新该状态的函数，而 this.setState 则是将新的状态对象与现有状态对象合并更新。此外，useState 是同步的，而 this.setState 在 React 事件处理程序中通常是异步的。