React 的 useState Hook
useState 是 React 最常用的 Hook 之一，用于在函数组件中管理状态。在 Hook 出现之前，状态只能在类组件中使用，useState 使函数组件也具备了状态管理能力，增强了其灵活性和功能。
useState 的作用
useState 函数允许在函数组件中声明状态变量，返回一个包含两个元素的数组：
当前状态值: 组件中可访问和显示的实际状态值。 状态更新函数: 用于修改状态变量值的函数。语法
1
const [state, setState] = useState(initialState);
使用示例
基本示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
当新状态依赖于旧状态时，可将函数传递给 setState，确保更新基于最新的状态值。
1
2
3
4
5
const [count, setCount] = useState(0);
const increment = () => {
setCount(prevCount => prevCount + 1); // 函数式更新，确保状态更新准确
};
可在组件中多次使用 useState 管理不同状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>
);
};
初始状态复杂或需要计算时，可将函数传递给 useState，该函数只在组件首次渲染时执行。
1
2
3
4
const [count, setCount] = useState(() => {
const initialCount = calculateInitialState(); // 复杂的计算
return initialCount;
});
setState 只更新你提供的那部分状态。React 不会进行深拷贝，修改对象或数组的某一部分时，需要显式更新整个对象或数组。
更新对象状态:1
2
3
4
5
const [user, setUser] = useState({ name: Alice, age: 25 });
const updateName = () => {
setUser(prevUser => ({ ...prevUser, name: Bob })); // 合并更新后的 name 和之前的状态
};
1
2
3
4
5
const [items, setItems] = useState([apple, banana]);
const addItem = () => {
setItems(prevItems => [...prevItems, orange]); // 向 items 数组添加 orange
};
常见误区
直接修改状态: 切勿直接修改状态 (例如 state = newState)。 务必使用 setState 函数，确保 React 正确更新 DOM。1
2
3
4
5
// 错误：直接修改状态
count = count + 1; // 不会触发重新渲染！
// 正确：使用 setState 触发重新渲染
setCount(count + 1);
总结
useState 是 React 中管理组件状态的基础构建块。它使函数组件拥有本地状态，使代码更模块化、易于理解。 通过 useState，可以构建响应用户输入或事件的动态交互式组件。
以上就是掌握 React 的 useState Hook：基础知识和高级用例的详细内容，更多请关注php中文网其它相关文章！