为什么你的React越写越卡？高级工程师都在用的3个Hook真相

组件重新渲染 
  → 所有Hook重新执行 
    → 虚拟DOM重新构建 
      → React做Diff对比 
        → 浏览器重新绘制 
          → 用户感受到卡顿

function UserList() {
const [users, setUsers] = useState([]);
const [selected, setSelected] = useState(null);

// 每次渲染都会创建新的函数
const handleSelect = (id) => {
    setSelected(id);
  };

// 每次渲染都会重新计算
const sortedUsers = users
    .filter(user => user.isActive)
    .sort((a, b) => a.name.localeCompare(b.name));

return (
    <div>
      {sortedUsers.map(user => (
        <UserCard 
          key={user.id} 
          user={user} 
          onSelect={handleSelect}  // 🔴 问题在这里
        />
      ))}
    </div>
  );
}

function UserList() {
const [selected, setSelected] = useState(null);

// ✅ 函数引用稳定，只有依赖项变化时才重新创建
const handleSelect = useCallback((id) => {
    setSelected(id);
  }, []); // 空依赖数组 = 组件生命周期内只创建一次

return (
    <div>
      {users.map(user => (
        <UserCard 
          key={user.id} 
          user={user} 
          onSelect={handleSelect}  // ✅ 引用稳定,子组件不会无谓重渲染
        />
      ))}
    </div>
  );
}

// 每次render
const fn1 = () => {};  // 内存地址: 0x001
// 下次render  
const fn2 = () => {};  // 内存地址: 0x002

fn1 === fn2  // false - React认为这是"不同"的props

const fn = useCallback(() => {}, []);
// 第一次: 0x001
// 第二次: 0x001  ← 还是同一个
// 第三次: 0x001  ← 还是同一个

// ❌ 错误示范：每次render都重新计算
function Dashboard() {
const data = fetchData();

// 假设这是个复杂的数据处理
const processed = data
    .filter(item => item.status === 'active')
    .map(item => ({
      ...item,
      score: calculateComplexScore(item)  // 假设这个计算很重
    }))
    .sort((a, b) => b.score - a.score)
    .slice(0, 10);

return<Chart data={processed} />;
}

function Dashboard() {
const data = fetchData();

// ✅ 只有data变化时才重新计算
const processed = useMemo(() => {
    return data
      .filter(item => item.status === 'active')
      .map(item => ({
        ...item,
        score: calculateComplexScore(item)
      }))
      .sort((a, b) => b.score - a.score)
      .slice(0, 10);
  }, [data]);  // 只依赖data

return<Chart data={processed} />;
}

const filteredProducts = useMemo(() => {
  return products.filter(product => {
    return (
      (!filters.category || product.category === filters.category) &&
      (!filters.minPrice || product.price >= filters.minPrice) &&
      (!filters.maxPrice || product.price <= filters.maxPrice) &&
      // ... 更多筛选条件
    );
  });
}, [products, filters]);  // 只有products或filters变化时才重新筛选

function ScrollList() {
const [items, setItems] = useState([]);
const lastScrollY = useRef(0);  // ✅ 不会触发重渲染

  useEffect(() => {
    const handleScroll = () => {
      const currentY = window.scrollY;
      
      // 记录滚动位置,但不需要触发UI更新
      lastScrollY.current = currentY;
      
      // 只在特定条件下才更新state（触发渲染）
      if (currentY > lastScrollY.current + 500) {
        loadMoreItems();
      }
    };
    
    window.addEventListener('scroll', handleScroll);
    return() =>window.removeEventListener('scroll', handleScroll);
  }, []);

return<div>{/* 列表内容 */}</div>;
}

// 1. 存储定时器ID
const timerId = useRef(null);

timerId.current = setTimeout(() => {
// do something
}, 1000);

// 2. 存储上一次的值
const prevValue = useRef(null);

useEffect(() => {
  prevValue.current = currentValue;
}, [currentValue]);

// 3. 存储不需要响应式的配置
const config = useRef({
threshold: 100,
debounceTime: 300
});

// 4. 避免闭包陷阱
const latestCallback = useRef(callback);
latestCallback.current = callback;  // 每次更新最新值

function StockList({ stocks }) {
const [selected, setSelected] = useState(null);

return (
    <div>
      {stocks.map(stock => (
        <StockCard
          key={stock.id}
          stock={stock}
          onSelect={(id) => setSelected(id)}  // 🔴 每次render创建新函数
          isSelected={selected === stock.id}
        />
      ))}
    </div>
  );
}

function StockCard({ stock, onSelect, isSelected }) {
// 🔴 每次render都重新计算
const changePercent = ((stock.current - stock.prev) / stock.prev * 100).toFixed(2);
const trendColor = changePercent > 0 ? 'red' : 'green';

return (
    <div onClick={() => onSelect(stock.id)}>
      <span style={{ color: trendColor }}>
        {changePercent}%
      </span>
    </div>
  );
}

function StockList({ stocks }) {
const [selected, setSelected] = useState(null);

// ✅ 稳定的函数引用
const handleSelect = useCallback((id) => {
    setSelected(id);
  }, []);

// ✅ 只在stocks变化时重新计算
const sortedStocks = useMemo(() => {
    return [...stocks].sort((a, b) => b.volume - a.volume);
  }, [stocks]);

return (
    <div>
      {sortedStocks.map(stock => (
        <MemoizedStockCard
          key={stock.id}
          stock={stock}
          onSelect={handleSelect}  // ✅ 引用稳定
          isSelected={selected === stock.id}
        />
      ))}
    </div>
  );
}

// ✅ 使用React.memo防止不必要的重渲染
const MemoizedStockCard = React.memo(function StockCard({ stock, onSelect, isSelected }) {
// ✅ 只在stock变化时重新计算
const stats = useMemo(() => {
    const changePercent = ((stock.current - stock.prev) / stock.prev * 100).toFixed(2);
    const trendColor = changePercent > 0 ? 'red' : 'green';
    return { changePercent, trendColor };
  }, [stock]);

return (
    <div onClick={() => onSelect(stock.id)}>
      <span style={{ color: stats.trendColor }}>
        {stats.changePercent}%
      </span>
    </div>
  );
});