react如何检测数据变更的
React 数据变更检测机制
React 通过状态（State）和属性（Props）的变化来触发组件的重新渲染，其核心检测机制基于以下原理：
状态（State）变更检测
React 使用 setState 方法或 useState Hook 更新状态时，会触发组件的重新渲染。React 会对新旧状态进行浅比较（Shallow Comparison），若发现引用变化则标记为需要更新。
const [count, setCount] = useState(0);
// 调用 setCount 会触发重新渲染
setCount(prev => prev + 1);属性（Props）变更检测
父组件重新渲染时，传递给子组件的 Props 会进行浅比较。若 Props 的引用发生变化（如对象、数组或基本类型的值改变），子组件会重新渲染。
function Child({ data }) {
return <div>{data.value}</div>;
}
// 父组件传递新的 data 对象时，Child 会重新渲染浅比较的局限性
React 默认使用浅比较，可能导致以下情况未被检测到：
- 对象或数组内部属性变化但引用未变
- 深层嵌套数据结构的变化
手动优化检测方式
对于复杂数据结构，可通过以下方式控制渲染：
- 不可变数据：使用扩展运算符或
immer库创建新引用setUser({ ...user, name: 'New Name' }); - React.memo：对函数组件进行 Props 浅比较优化
const MemoizedComponent = React.memo(MyComponent); - useMemo/useCallback：缓存计算结果或函数引用
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
性能监控工具
React DevTools 的 Profiler 可帮助分析组件渲染原因，显示哪些 Props 或 State 变化导致了重新渲染。
