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 拆分独立状态
• 考虑 useReducer Hook 管理复杂逻辑

  const [state, dispatch] = useReducer(reducer, initialState);
  dispatch({ type: 'INCREMENT' });

性能优化

• 当状态变更导致昂贵计算时，可使用 useMemo 或 useCallback 缓存结果
• 避免在渲染函数中直接调用状态更新，可能导致无限循环