react如何改变state的值

使用 setState 方法（类组件）

在类组件中，通过 this.setState() 更新状态。该方法接受一个对象或函数，合并新状态到当前状态并触发重新渲染。

this.setState({ key: newValue });  
// 或基于前一个状态更新  
this.setState((prevState) => ({ key: prevState.key + 1 }));  

使用 useState Hook（函数组件）

函数组件中通过 useState Hook 定义状态，调用返回的更新函数（如 setCount）直接替换状态值。

const [count, setCount] = useState(0);  
// 直接更新  
setCount(1);  
// 基于前一个值更新  
setCount(prevCount => prevCount + 1);  

状态更新注意事项

• 异步性：setState 和 useState 的更新可能是异步的，连续调用可能合并。需依赖前一个状态时，使用函数形式。
• 不可变数据：直接修改状态对象无效（如 this.state.key = 1），必须通过更新函数。
• 数组/对象更新：合并对象或创建新数组以避免直接修改。

  // 对象合并  
  setState({ ...state, key: newValue });  
  // 数组添加元素  
  setArray([...array, newItem]);  

性能优化

• 批量更新：React 自动批量处理同步代码中的状态更新，异步环境（如 setTimeout）需用 ReactDOM.unstable_batchedUpdates（谨慎使用）。
• 避免深层嵌套：复杂状态可考虑使用 useReducer 或状态管理库（如 Redux）。