// 基于引用的不可变性检测
const [state, setState] = useState({ count: 0 });

// 触发重新渲染的条件：
// 1. setState调用
// 2. Props引用变化
// 3. Context变化

// 优势：
// - 简单可预测
// - 容易实现时间旅行调试
// - 无魔法，显式更新

// 劣势：
// - 需要手动优化（useMemo/useCallback）
// - 全组件重新渲染，依赖开发者优化

// Vue 2: Object.defineProperty
Object.defineProperty(obj, key, {
  get() { /* 依赖收集 */ },
  set(newVal) { /* 触发更新 */ }
});

// Vue 3: Proxy
const reactive = (obj) => new Proxy(obj, {
  get(target, key) { /* 依赖追踪 */ },
  set(target, key, value) { /* 触发更新 */ }
});

// 优势：
// - 自动依赖追踪
// - 细粒度更新（组件/组件内元素）
// - 无需手动声明依赖

// 劣势：
// - 响应式对象有特殊要求
// - 部分操作需要特殊API（Vue.set/数组方法）
// - Proxy兼容性（Vue 3需要现代浏览器）

// React的Diff算法（O(n)复杂度）
// 1. 不同类型的元素 => 销毁重建
// 2. 相同类型的DOM元素 => 更新属性
// 3. 相同类型的组件元素 => 递归比较子节点

// Concurrent Features（React 18+）
// - 可中断的渲染过程
// - 优先级调度
// - 自动批处理

// Vue 3的编译器优化：
// 1. 静态提升（Static Hoisting）
// 2. 补丁标志（Patch Flags）
// 3. 树结构拍平（Tree Flattening）

// 示例编译结果
const _hoisted_1 = /*静态节点*/;
// 动态节点带有补丁标志
createVNode("div", null, [
  _hoisted_1,
  createVNode("span", { class: _normalizedClass }, null, 2 /* CLASS */)
])

// 类组件时代
class Component extends React.Component {
  state = { count: 0 };
  increment = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };
}

// Hooks时代
const [state, setState] = useState();
const [reducerState, dispatch] = useReducer(reducer, initialState);

// 外部状态管理（Redux Toolkit现代方式）
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: { increment: state => { state.value += 1; } }
});

// Options API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  }
};

// Composition API
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;

// Pinia（Vuex的现代替代）
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } }
});

// 自定义Hook
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    // 获取数据逻辑
  }, [url]);
  
  return { data, loading };
}

// 使用
const { data, loading } = useFetch('/api/data');

// Composable函数
export function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  
  watchEffect(async () => {
    loading.value = true;
    data.value = await fetch(url).then(r => r.json());
    loading.value = false;
  });
  
  return { data, loading };
}

// 使用
const { data, loading } = useFetch('/api/data');