React 的 useState Hook
useState 是 React 最常用的 Hook 之一，用于在函数组件中管理状态。在 Hook 出现之前，状态只能在类组件中使用，useState 使函数组件也具备了状态管理能力，增强了其灵活性和功能。
useState 的作用
useState 函数允许在函数组件中声明状态变量，返回一个包含两个元素的数组：
- 当前状态值: 组件中可访问和显示的实际状态值。
- 状态更新函数: 用于修改状态变量值的函数。
语法
<code class="javascript">const [state, setState] = useState(initialState);</code>
-
state: 当前状态值。 -
setState: 状态更新函数。 -
initialState: 组件首次渲染时的初始状态值。
使用示例
基本示例:
<code class="javascript">import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0); // 初始计数为 0
const increment = () => {
setCount(count + 1); // 使用 setCount 更新状态
};
return (
<div>
<p>当前计数：{count}</p>
<button onClick={increment}>递增</button>
</div>
);
};
export default Counter;</code>
-
说明:
useState(0)将初始计数设置为 0。点击按钮后，setCount更新计数，触发组件重新渲染。
函数式更新:
当新状态依赖于旧状态时，可将函数传递给 setState，确保更新基于最新的状态值。
<code class="javascript">const [count, setCount] = useState(0);
const increment = () => {
setCount(prevCount => prevCount + 1); // 函数式更新，确保状态更新准确
};</code>
-
说明:
prevCount代表旧状态值，函数返回新状态值。
多个状态变量:
可在组件中多次使用 useState 管理不同状态。
<code class="javascript">import React, { useState } from 'react';
const MultiStateComponent = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('John');
return (
<div>
<p>计数：{count}</p>
<button onClick={() => setCount(count + 1)}>递增</button>
<p>姓名：{name}</p>
<button onClick={() => setName('Doe')}>更改姓名</button>
</div>
);
};</code>
-
说明: 两个状态变量 (
count和name) 独立管理。
延迟初始化:
初始状态复杂或需要计算时，可将函数传递给 useState，该函数只在组件首次渲染时执行。
<code class="javascript">const [count, setCount] = useState(() => {
const initialCount = calculateInitialState(); // 复杂的计算
return initialCount;
});</code>
- 说明: 适用于需要根据一次性计算或副作用初始化状态的情况。
更新对象或数组状态:
setState 只更新你提供的那部分状态。React 不会进行深拷贝，修改对象或数组的某一部分时，需要显式更新整个对象或数组。
更新对象状态:
<code class="javascript">const [user, setUser] = useState({ name: 'Alice', age: 25 });
const updateName = () => {
setUser(prevUser => ({ ...prevUser, name: 'Bob' })); // 合并更新后的 name 和之前的状态
};</code>
-
说明:
setUser通过展开运算符 (...) 合并更新后的name属性和之前的状态。
更新数组状态:
<code class="javascript">const [items, setItems] = useState(['apple', 'banana']);
const addItem = () => {
setItems(prevItems => [...prevItems, 'orange']); // 向 items 数组添加 'orange'
};</code>
- 说明: 使用展开运算符创建包含之前项目和新项目 ('orange') 的新数组。
常见误区
-
直接修改状态: 切勿直接修改状态 (例如
state = newState)。 务必使用setState函数，确保 React 正确更新 DOM。
<code class="javascript">// 错误：直接修改状态 count = count + 1; // 不会触发重新渲染！ // 正确：使用 setState 触发重新渲染 setCount(count + 1);</code>
-
状态更新是异步的: React 批量更新状态，
setState调用后状态可能不会立即更新。 使用旧状态计算新状态时，这一点尤其重要。
总结
useState 是 React 中管理组件状态的基础构建块。它使函数组件拥有本地状态，使代码更模块化、易于理解。 通过 useState，可以构建响应用户输入或事件的动态交互式组件。
