// 每一个 useState 就是记事本上的一项
function ChatRoom() {
  const [messages, setMessages] = useState([]);     // 记1：聊天记录
  const [inputText, setInputText] = useState('');   // 记2：输入框内容
  const [isConnected, setIsConnected] = useState(false); // 记3：连接状态
  const [showEmoji, setShowEmoji] = useState(false);     // 记4：表情面板
 
  // 每次渲染，React 把这 4 个值原样交还给你
}

// ── useState：简单状态，各自独立 ──
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState(0);
 
// ── useReducer：多个字段经常一起变，逻辑复杂 ──
const [form, dispatch] = useReducer(formReducer, {
  name: '', email: '', age: 0,
});
 
function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return { name: '', email: '', age: 0 };
    case 'LOAD_DRAFT':
      return action.draft;
    default:
      return state;
  }
}
 
// 使用 — 意图很清晰
dispatch({ type: 'SET_FIELD', field: 'name', value: 'Coya' });
dispatch({ type: 'RESET' });

// ❌ 没有 Context：props 逐层传递 — props drilling
<App>                           // theme 在这
  <Header theme={theme} />      // 传一次
  <Page theme={theme}>          // 传一次
    <Sidebar theme={theme} />   // 传一次
    <Content theme={theme}>     // 传一次
      <Article theme={theme} /> // 传一次 — Header 根本不需要 theme，
                                //         但它被逼着传了一路
    </Content>
  </Page>
</App>
 
// ✅ 有 Context：需要的组件自己拿
<ThemeProvider value={theme}>   // 在这广播
  <Header />                    // 不传了
  <Page>
    <Sidebar />
    <Content>
      <Article />               // 自己用 useContext 接收
    </Content>
  </Page>
</ThemeProvider>

// 1. 定义 Reducer + Context
const TasksContext = createContext(null);
const TasksDispatchContext = createContext(null);
 
function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'ADD':
      return [...tasks, { id: Date.now(), text: action.text, done: false }];
    case 'TOGGLE':
      return tasks.map(t => t.id === action.id ? { ...t, done: !t.done } : t);
    case 'DELETE':
      return tasks.filter(t => t.id !== action.id);
    default:
      return tasks;
  }
}
 
// 2. Provider — 广播 state + dispatch
function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(tasksReducer, []);
  return (
    <TasksContext.Provider value={tasks}>
      <TasksDispatchContext.Provider value={dispatch}>
        {children}
      </TasksDispatchContext.Provider>
    </TasksContext.Provider>
  );
}
 
// 3. 自定义 Hook — 封一层，组件不用直接碰 Context
function useTasks() {
  return useContext(TasksContext);
}
function useTasksDispatch() {
  return useContext(TasksDispatchContext);
}
 
// 4. 组件使用
function TaskList() {
  const tasks = useTasks();              // 只读数据
  const dispatch = useTasksDispatch();   // 只发指令
  // ...
}

function Demo() {
  // 1. 引用 DOM 元素
  const inputRef = useRef(null);
  function focusInput() {
    inputRef.current.focus();  // 直接操作 DOM
  }
 
  // 2. 保存定时器 ID
  const timerRef = useRef(null);
  useEffect(() => {
    timerRef.current = setInterval(() => {}, 1000);
    return () => clearInterval(timerRef.current);
  }, []);
 
  // 3. 保存上一次的值
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(count);
  useEffect(() => {
    prevCountRef.current = count;  // 渲染后更新
  });
  // prevCountRef.current 永远是上一次渲染的 count
 
  // 4. 保存「不影响 UI 但需要跨渲染持久化」的数据
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      console.log('首次渲染！');
    }
  });
}

function VideoPlayer({ src, isPlaying }) {
  const videoRef = useRef(null);
 
  // Effect：把 React state 同步到外部系统（video DOM 元素）
  useEffect(() => {
    if (isPlaying) {
      videoRef.current.play();   // video 是外部系统
    } else {
      videoRef.current.pause();
    }
  }, [isPlaying]);              // isPlaying 变了 → 重新同步
 
  return <video ref={videoRef} src={src} />;
}

useEffect(() => {
  // 建立连接 / 订阅
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
 
  // 返回 cleanup 函数
  return () => {
    connection.disconnect();  // 下次 effect 跑之前 / 组件卸载时执行
  };
}, [roomId]);  // roomId 变了 → cleanup 旧连接 → 建新连接

// ❌ 场景 1：渲染中可以直接计算的值
function TodoList({ todos, filter }) {
  const [visibleTodos, setVisibleTodos] = useState([]);
 
  // ❌ 用 Effect 过滤
  useEffect(() => {
    setVisibleTodos(todos.filter(t => matchesFilter(t, filter)));
  }, [todos, filter]);
 
  // ✅ 直接在渲染中计算
  const visibleTodos = todos.filter(t => matchesFilter(t, filter));
}
 
// ❌ 场景 2：事件处理中可以做的事
function ProductPage({ productId }) {
  // ❌ 用 Effect 同步到分析系统
  useEffect(() => {
    analytics.track('view', { productId });
  }, [productId]);
 
  // ✅ 在事件处理函数里做
  function handleBuy() {
    analytics.track('purchase', { productId });  // 用户行为 → 事件处理
    buy(productId);
  }
}
 
// ❌ 场景 3：可以用 key 重置的状态
function Profile({ userId }) {
  const [bio, setBio] = useState('');
 
  // ❌ 用 Effect 在 userId 变化时重置 bio
  useEffect(() => {
    setBio('');
  }, [userId]);
 
  // ✅ 用 key 让 React 自动重建组件
  return <EditProfile key={userId} />;
  // key 变了 → React 卸载旧组件 → 创建新组件 → bio 自动重置为 ''
}

function ProductList({ products, minPrice }) {
  // useMemo：缓存过滤结果
  // 只有当 products 或 minPrice 变化时才重新过滤
  const filtered = useMemo(
    () => products.filter(p => p.price >= minPrice),
    [products, minPrice]
  );
 
  // useCallback：缓存函数引用
  // 只有当依赖变化时才创建新函数
  // 配合 React.memo 使用时，避免子组件因为「函数引用变了」而无谓重渲染
  const handleBuy = useCallback(
    (id) => {
      console.log('购买', id);
      checkout(id);
    },
    []  // 没有依赖 → 函数引用永远不变
  );
 
  return filtered.map(p =>
    <ProductCard key={p.id} product={p} onBuy={handleBuy} />
  );
}
 
// 子组件用 memo 包裹
const ProductCard = React.memo(function ProductCard({ product, onBuy }) {
  // 只有 product 或 onBuy 引用变化时才重渲染
  return <div onClick={() => onBuy(product.id)}>{product.name}</div>;
});

// 把多个 Hook 打包成一个有意义的工具
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
 
  useEffect(() => {
    function handleOnline()  { setIsOnline(true); }
    function handleOffline() { setIsOnline(false); }
 
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
 
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
 
  return isOnline;
}
 
// 使用 — 极其简洁
function App() {
  const isOnline = useOnlineStatus();
  return <div>{isOnline ? '在线' : '离线'}</div>;
}
 
// 多个组件调用 — 各自独立
function Header() {
  const isOnline = useOnlineStatus();  // Header 自己的 isOnline
  // ...
}
function Footer() {
  const isOnline = useOnlineStatus();  // Footer 自己的 isOnline
  // 两个 isOnline 是独立的 state，互不影响
}