react怎样实现更新
更新 React 组件状态
使用 useState Hook 管理组件内部状态。通过调用状态更新函数触发重新渲染。状态更新可能是异步的，连续更新需使用函数形式。
const [count, setCount] = useState(0);
// 直接更新
setCount(count + 1);
// 函数式更新
setCount(prevCount => prevCount + 1);强制组件重新渲染
当需要绕过状态或属性变化强制更新时，可使用 useReducer Hook 或模拟键值重置。此方法不推荐常规使用。
const [_, forceUpdate] = useReducer(x => x + 1, 0);
// 调用 forceUpdate() 触发重新渲染处理副作用更新
useEffect Hook 在依赖项变化时执行副作用。依赖数组为空时仅在挂载和卸载时运行。
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // 仅在 count 变化时更新上下文更新
通过 useContext Hook 消费上下文。当上下文提供者的值变更时，所有消费组件自动更新。
const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);优化性能更新
React.memo 包裹组件避免不必要的渲染。useMemo 和 useCallback 缓存计算结果和函数引用。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);类组件更新方式
类组件通过 this.setState() 更新状态。第二个参数可接收更新完成后的回调函数。
this.setState({ count: this.state.count + 1 }, () => {
console.log('状态更新完成');
});不可变数据更新
状态更新必须保持不可变性。数组使用扩展运算符或 map/filter，对象使用 Object.assign 或扩展运算符。
setItems([...items, newItem]);
setUser(prev => ({ ...prev, name: 'New Name' }));
