react如何更新数据
更新状态（State）
使用 useState Hook 声明状态变量，并通过状态更新函数修改数据。React 会自动触发重新渲染。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1); // 直接更新
};
const asyncIncrement = () => {
setCount(prevCount => prevCount + 1); // 函数式更新（依赖前值）
};
return (
<div>
<p>{count}</p>
<button onClick={increment}>+1</button>
</div>
);
}更新对象或数组
状态为对象或数组时，需创建新引用以避免直接修改原状态。使用扩展运算符或 map/filter 等不可变方法。
const [user, setUser] = useState({ name: 'Alice', age: 25 });
// 更新对象属性
setUser({ ...user, age: 26 });
// 更新数组
const [items, setItems] = useState([1, 2, 3]);
setItems([...items, 4]); // 添加元素
setItems(items.filter(item => item !== 2)); // 删除元素使用 useReducer 管理复杂状态
适合逻辑复杂或多个相关联的状态更新。通过派发动作（action）集中处理状态变更。
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return <button onClick={() => dispatch({ type: 'increment' })}>{state.count}</button>;
}更新上下文（Context）数据
通过 Context.Provider 传递新的值，触发消费组件的重新渲染。
const UserContext = React.createContext();
function App() {
const [user, setUser] = useState({ name: 'Bob' });
return (
<UserContext.Provider value={{ user, setUser }}>
<ChildComponent />
</UserContext.Provider>
);
}
function ChildComponent() {
const { user, setUser } = useContext(UserContext);
return <button onClick={() => setUser({ name: 'Alice' })}>Update User</button>;
}更新外部状态（如 Redux）
通过 useSelector 获取状态，useDispatch 派发动作更新全局存储。
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>;
}注意事项
- 异步更新：状态更新可能是异步的，连续调用
setState需依赖前值时应使用函数形式。 - 性能优化：对于高频更新，考虑
useMemo或useCallback避免不必要的渲染。 - 不可变数据：直接修改状态（如
state.push(item)）不会触发渲染，必须返回新引用。
