react 如何改变state
改变 state 的基本方法
在 React 中，state 是组件内部的可变数据，用于存储和管理组件的状态。改变 state 需要使用 setState 方法（类组件）或 useState Hook（函数组件）。
类组件中使用 setState
在类组件中，通过调用 this.setState 方法更新 state。setState 可以接收一个对象或函数作为参数，用于更新 state 的部分或全部字段。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
name: 'John'
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
updateName = () => {
this.setState({ name: 'Jane' });
};
}函数组件中使用 useState
在函数组件中，使用 useState Hook 来定义和更新 state。useState 返回一个数组，包含当前 state 值和更新 state 的函数。
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState('John');
const incrementCount = () => {
setCount(count + 1);
};
const updateName = () => {
setName('Jane');
};
}异步更新 state
React 的 state 更新可能是异步的，因此直接依赖当前 state 值更新可能会导致问题。可以通过传递函数给 setState 或 useState 的更新函数来确保获取最新的 state 值。
类组件中的异步更新
this.setState((prevState) => ({
count: prevState.count + 1
}));函数组件中的异步更新
setCount((prevCount) => prevCount + 1);合并 state 更新
在类组件中，setState 会自动合并 state 的更新。而在函数组件中，useState 不会自动合并，需要手动合并。
类组件中的合并
this.setState({
name: 'Jane',
age: 30
});函数组件中的手动合并
const [user, setUser] = useState({ name: 'John', age: 25 });
setUser({
...user,
age: 30
});避免直接修改 state
直接修改 state 不会触发组件的重新渲染，必须通过 setState 或 useState 的更新函数来修改 state。
错误示例
// 错误：直接修改 state
this.state.count = 1;正确示例
// 正确：通过 setState 更新
this.setState({ count: 1 });使用回调函数处理 state 更新后的操作
如果需要执行 state 更新后的操作，可以在 setState 或 useState 的更新函数后使用回调函数或 useEffect。
类组件中的回调
this.setState({ count: 1 }, () => {
console.log('State updated');
});函数组件中的 useEffect
useEffect(() => {
console.log('State updated');
}, [count]);
