react如何变更state状态
变更 React 状态的常用方法
在 React 中，状态（state）的变更通常通过 useState Hook（函数组件）或 setState 方法（类组件）实现。以下是具体实现方式：
函数组件中使用 useState
通过 useState Hook 定义状态变量和更新函数：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初始值为0
// 直接传递新值
const increment = () => setCount(count + 1);
// 使用函数式更新（依赖前一个状态）
const safeIncrement = () => setCount(prevCount => prevCount + 1);
return (
<button onClick={safeIncrement}>Count: {count}</button>
);
}类组件中使用 setState
通过 this.setState 更新状态：
class Counter extends React.Component {
state = { count: 0 };
// 对象式更新
increment = () => this.setState({ count: this.state.count + 1 });
// 函数式更新
safeIncrement = () => this.setState(prevState => ({
count: prevState.count + 1
}));
render() {
return (
<button onClick={this.safeIncrement}>Count: {this.state.count}</button>
);
}
}状态更新注意事项
-
异步性：状态更新可能是异步的，连续调用
setState可能会被合并。 -
不可变性：对于对象或数组类型的状态，应创建新对象而非直接修改原状态：
// 正确做法（展开运算符） setUser({ ...user, name: 'New Name' }); // 数组更新 setItems([...items, newItem]);
复杂状态管理
对于嵌套对象或多状态关联，建议：
- 使用多个
useState拆分独立状态 - 考虑
useReducerHook 管理复杂逻辑const [state, dispatch] = useReducer(reducer, initialState); dispatch({ type: 'INCREMENT' });
性能优化
- 当状态变更导致昂贵计算时，可使用
useMemo或useCallback缓存结果 - 避免在渲染函数中直接调用状态更新，可能导致无限循环
