React如何实现数据更新
React 数据更新的核心方法
React 中数据更新主要通过状态管理实现，分为组件内部状态（State）和全局状态（Context/Redux等）两种形式。
使用 useState 更新局部状态
通过 useState Hook 声明状态变量和更新函数，调用更新函数会触发组件重新渲染：
const [count, setCount] = useState(0);
// 更新方式
setCount(count + 1); // 直接值
setCount(prev => prev + 1); // 函数式更新使用 useReducer 处理复杂状态
适合具有多个子状态或复杂更新逻辑的场景：
const [state, dispatch] = useReducer(reducer, initialState);
// 通过dispatch触发更新
dispatch({ type: 'INCREMENT' });类组件中的 setState
类组件通过 this.setState() 更新状态，支持对象或函数形式：
this.setState({ count: this.state.count + 1 });
this.setState(prevState => ({ count: prevState.count + 1 }));全局状态管理方案
Context API 更新
创建 Context 并通过 Provider 传递状态和更新函数：
const MyContext = createContext();
function App() {
const [value, setValue] = useState('');
return (
<MyContext.Provider value={{ value, setValue }}>
<ChildComponent />
</MyContext.Provider>
);
}Redux 状态更新
通过 dispatch action 触发 reducer 更新 store：
dispatch({ type: 'ADD_TODO', payload: 'New item' });不可变数据更新原则
React 依赖不可变数据对比来优化渲染，数组和对象应使用新引用：
// 数组更新
setItems([...items, newItem]);
// 对象更新
setUser({ ...user, name: 'New Name' });性能优化技巧
对于频繁更新，可使用 useMemo 或 useCallback 避免不必要的计算和子组件重渲染。批量更新可通过 React 18 的自动批处理或 unstable_batchedUpdates 实现。
