情景开发

import React, { useState, useEffect } from 'react';
 
function ScrollToTop() {
  const [show, setShow] = useState(false);
 
  useEffect(() => {
    // 1. 定义处理函数
    const handleScroll = () => {
      console.log("正在滚动..."); // 验证是否多次注册
      if (window.scrollY > 300) {
        setShow(true);
      } else {
        setShow(false);
      }
    };
 
    // 2. 在 Mount 之后绑定
    window.addEventListener('scroll', handleScroll);
 
    // 3. 必须：在 Unmount 之前清理
    // 底层逻辑：当组件销毁，React 会调用这个返回函数
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空数组确保只在挂载和卸载时执行
 
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
 
  return (
    show && (
      <button 
        onClick={scrollToTop} 
        style={{ position: 'fixed', bottom: 50, right: 50 }}
      >
        Back to Top
      </button>
    )
  );
}

function ScrollBox() {
  const containerRef = React.useRef(null);
 
  useEffect(() => {
    const box = containerRef.current; // 通过 ref 拿到 DOM
    if (!box) return;
 
    const handleScroll = () => {
      console.log("容器内滚动:", box.scrollTop);
    };
 
    // 在特定元素上绑定
    box.addEventListener('scroll', handleScroll);
 
    return () => box.removeEventListener('scroll', handleScroll);
  }, []); // 注意：如果 containerRef 指向的元素会变，这里逻辑会更复杂
 
  return (
    <div ref={containerRef} style={{ height: '200px', overflow: 'auto' }}>
      <div style={{ height: '1000px' }}>滚动我内容</div>
    </div>
  );
}

function ScrollToTop({ threshold }) { // threshold 从 props 传进来
  const [show, setShow] = React.useState(false);
 
  React.useEffect(() => {
    const handleScroll = () => {
      // 这里的 threshold 永远是当前渲染周期的新值
      if (window.scrollY > threshold) {
        setShow(true);
      } else {
        setShow(false);
      }
    };
 
    window.addEventListener('scroll', handleScroll);
 
    return () => {
      // 关键：每次 threshold 变化，都会先跑这里，注销旧的监听
      window.removeEventListener('scroll', handleScroll);
    };
  }, [threshold]); // 依赖项必须包含 threshold
 
  // ... render ...
}

function ScrollToTop({ threshold }) {
  const [show, setShow] = React.useState(false);
  
  // 1. 创建 Ref
  const thresholdRef = React.useRef(threshold);
  
  // 2. 每次渲染时，手动更新 current
  // 因为这是在 Render 阶段执行的赋值，它是同步的，极快
  thresholdRef.current = threshold; 
 
  React.useEffect(() => {
    const handleScroll = () => {
      // 3. 这里永远能拿到最新的 current
      if (window.scrollY > thresholdRef.current) {
        setShow(true);
      } else {
        setShow(false);
      }
    };
 
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []); // 保持空数组，只绑定一次
 
  // ... render ...
}

import React, { useState, useEffect } from 'react';
 
// 1. 这是一个拦截器：点击时不让浏览器刷新，只改地址栏
const Link = ({ to, children }) => {
  const handleClick = (e) => {
    e.preventDefault(); // 阻止浏览器默认的“全页面跳转”
    window.history.pushState({}, '', to); // 改变地址栏，但不刷新
    
    // 自定义一个事件通知路由：地址变了！
    const navEvent = new PopStateEvent('popstate');
    window.dispatchEvent(navEvent);
  };
 
  return <a href={to} onClick={handleClick}>{children}</a>;
};
 
// 2. 这是一个匹配器：根据当前地址显示内容
const Route = ({ path, children }) => {
  // 核心：用状态来驱动 UI 渲染
  const [currentPath, setCurrentPath] = useState(window.location.pathname);
 
  useEffect(() => {
    const onLocationChange = () => {
      setCurrentPath(window.location.pathname); // 当地址变了，更新状态触发重绘
    };
 
    // 监听浏览器的“前进/后退”或我们手动触发的事件
    window.addEventListener('popstate', onLocationChange);
    return () => window.removeEventListener('popstate', onLocationChange);
  }, []);
 
  return currentPath === path ? children : null;
};
 
// 3. 使用方式
export default function App() {
  return (
    <div>
      <nav>
        <Link to="/">首页</Link> | <Link to="/about">关于</Link>
      </nav>
 
      <hr />
 
      <Route path="/">
        <h2>这是首页内容</h2>
      </Route>
      <Route path="/about">
        <h2>这是关于页面</h2>
      </Route>
    </div>
  );
}