React: 性能优化：useMemo 与 useCallback

function ShopPage() {
  const [products] = useState(generate10000Products())
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState('name')

  // ❌ 问题：每次输入都重新过滤 10,000 件商品
  const filtered = products
    .filter(p => p.name.includes(search))
    .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1)

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">按名称</option>
        <option value="price">按价格</option>
      </select>
      <ProductList products={filtered} />
    </div>
  )
}

function ShopPage() {
  const [products] = useState(generate10000Products())
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState('name')

  // ✅ useMemo：只在 search 或 sortBy 变化时才重新计算
  const filtered = useMemo(() => {
    console.log('重新过滤...(只在搜索词或排序变化时)')
    return products
      .filter(p => p.name.includes(search))
      .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1)
  }, [search, sortBy, products])

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">按名称</option>
        <option value="price">按价格</option>
      </select>
      <ProductList products={filtered} />
    </div>
  )
}

const memoizedValue = useMemo(() => {
  return 昂贵的计算()
}, [依赖1, 依赖2])

// 场景 1：数据转换（过滤、排序、分组）
const activeUsers = useMemo(
  () => users.filter(u => u.isActive).sort((a, b) => a.name.localeCompare(b.name)),
  [users]
)

// 场景 2：格式化（数字、日期、字符串拼接）
const formattedPrice = useMemo(
  () => new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(price),
  [price]
)

// 场景 3：派生状态（从已有数据计算新数据）
const statistics = useMemo(() => ({
  total: orders.length,
  paid: orders.filter(o => o.status === 'paid').length,
  amount: orders.reduce((sum, o) => sum + o.amount, 0),
  avgAmount: orders.length ? orders.reduce((sum, o) => sum + o.amount, 0) / orders.length : 0
}), [orders])

// ============================================
// 示例：有 useMemo vs 无 useMemo 的性能对比
// ============================================

function ExpensiveCalc({ num, unrelated }) {
  // ❌ 没有 useMemo：每次渲染都执行
  const slowResult1 = slowFibonacci(num)

  // ✅ 有 useMemo：num 没变就不重新计算
  const slowResult2 = useMemo(() => slowFibonacci(num), [num])

  return (
    <div>
      <p>num={num} 的斐波那契数列</p>
      <p>无 useMemo：{slowResult1}（每次渲染计算）</p>
      <p>有 useMemo：{slowResult2}（只在 num 变化时计算）</p>
      <p>不相关状态：{unrelated}（点按钮改变这个值）</p>
    </div>
  )
}

function slowFibonacci(n) {
  if (n <= 1) return n
  let a = 0, b = 1, c
  for (let i = 2; i <= n; i++) { c = a + b; a = b; b = c }
  console.log('fibonacci 计算！n=' + n)
  return b
}
// 点击改变 unrelated → 无 useMemo 的重新计算，有 useMemo 的跳过

const memoizedFn = useCallback(() => {
  doSomething(a, b)
}, [a, b])

function Parent() {
  const [count, setCount] = useState(0)

  // ❌ 每次 Parent 渲染，handleClick 都是新的函数
  // 导致 Child 的 React.memo 失效
  const handleClick = () => {
    console.log('点击了')
  }

  // ✅ useCallback：handleClick 引用不变
  // Child 的 React.memo 能正常工作（跳过重渲染）
  const handleClick = useCallback(() => {
    console.log('点击了')
  }, [])  // 空依赖：这个函数永远不会变
}

// ============================================
// 示例：useCallback + React.memo 配合使用
// ============================================

// ---- 子组件：用 React.memo 包裹 ----
const ExpensiveList = React.memo(function ExpensiveList({ items, onItemClick }) {
  console.log('ExpensiveList 重新渲染！')
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => onItemClick(item.id)}>选中</button>
        </li>
      ))}
    </ul>
  )
})

// ---- 父组件 ----
function App() {
  const [count, setCount] = useState(0)
  const [items] = useState([
    { id: 1, name: '项目 A' },
    { id: 2, name: '项目 B' },
    { id: 3, name: '项目 C' }
  ])

  // ❌ 每次 App 渲染，函数引用都变 → React.memo 失效
  const handleClickBad = (id) => console.log('选中：', id)

  // ✅ 函数引用不变 → React.memo 生效
  const handleClick = useCallback((id) => {
    console.log('选中：', id)
  }, [])

  return (
    <div>
      <p>计数器：{count}</p>
      <button onClick={() => setCount(c => c + 1)}>改变计数</button>
      {/* 点按钮改变计数 → 不影响 ExpensiveList 的渲染 */}
      <ExpensiveList items={items} onItemClick={handleClick} />
    </div>
  )
}
// 点"改变计数"时：
// ❌ 无 useCallback → ExpensiveList 跟着重新渲染
// ✅ 有 useCallback → ExpensiveList 跳过渲染（性能提升）

// ❌ 不需要：简单计算
const doubled = useMemo(() => count * 2, [count])
// ✅ 直接写：count * 2 本身就已经很快了
const doubled = count * 2

// ❌ 不需要：事件处理但不传给子组件
const handleClick = useCallback(() => {
  console.log('点击')
}, [])
// ✅ 直接写即可
const handleClick = () => console.log('点击')

// ❌ 不需要：子组件没有用 React.memo
// useCallback 包装了但没人消费这个"稳定引用"

// useMemo 和 useCallback 本身有开销（比较依赖数组）
// 滥用 = 引入额外的比较逻辑，比不优化更慢

// 经验法则：
// 1. 先写不加优化的版本
// 2. 感觉到卡顿（帧率 < 60fps）再用
// 3. 用 React DevTools Profiler 测量

// ============================================
// 完整示例：聊天消息列表（综合性能优化）
// ============================================

import { useState, useMemo, useCallback, memo } from 'react'

// ---- 消息项（React.memo + useCallback） ----
const MessageItem = memo(function MessageItem({ message, onReact, onReply }) {
  console.log(`渲染消息：${message.id}`)
  
  return (
    <div style={{
      padding: '12px',
      margin: '8px 0',
      backgroundColor: message.isMine ? '#e6f7ff' : '#f5f5f5',
      borderRadius: '8px'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <strong>{message.author}</strong>
        <span style={{ color: '#999', fontSize: '12px' }}>
          {message.time}
        </span>
      </div>
      <p style={{ margin: '8px 0' }}>{message.text}</p>
      <div style={{ display: 'flex', gap: '8px' }}>
        <button onClick={() => onReact(message.id)} style={smallBtn}>
          👍 {message.reactions}
        </button>
        <button onClick={() => onReply(message.id)} style={smallBtn}>
          💬 回复
        </button>
      </div>
    </div>
  )
})

// ---- 主组件 ----
function ChatApp() {
  const [messages, setMessages] = useState(generateMessages(100))
  const [filter, setFilter] = useState('全部')
  const [unreadCount, setUnreadCount] = useState(5)

  // useMemo：过滤消息（100 条中过滤）
  const filteredMessages = useMemo(
    () => filter === '全部'
      ? messages
      : messages.filter(m => filter === '我的' ? m.isMine : !m.isMine),
    [messages, filter]
  )

  // useCallback：保持引用稳定，让 MessageItem 的 memo 生效
  const handleReact = useCallback((id) => {
    setMessages(prev => prev.map(m =>
      m.id === id ? { ...m, reactions: m.reactions + 1 } : m
    ))
  }, [])

  const handleReply = useCallback((id) => {
    console.log('回复消息：', id)
  }, [])

  // 计算统计信息
  const stats = useMemo(() => ({
    total: messages.length,
    mine: messages.filter(m => m.isMine).length,
    totalReactions: messages.reduce((s, m) => s + m.reactions, 0)
  }), [messages])

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h2>💬 聊天（{unreadCount} 条未读）</h2>
        <button onClick={() => setUnreadCount(c => c + 1)}>
          增加未读数（测试性能）
        </button>
      </div>

      {/* 统计（useMemo） */}
      <div style={{ display: 'flex', gap: '16px', marginBottom: '12px', fontSize: '13px', color: '#666' }}>
        <span>共 {stats.total} 条</span>
        <span>我的 {stats.mine} 条</span>
        <span>👍 {stats.totalReactions}</span>
      </div>

      {/* 筛选按钮 */}
      <div style={{ marginBottom: '12px' }}>
        {['全部', '我的', '他人的'].map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            style={{
              padding: '4px 12px', margin: '0 4px',
              backgroundColor: filter === f ? '#1890ff' : '#f0f0f0',
              color: filter === f ? 'white' : '#333',
              border: 'none', borderRadius: '4px', cursor: 'pointer'
            }}
          >
            {f}
          </button>
        ))}
      </div>

      {/* 消息列表 */}
      <div style={{ maxHeight: '500px', overflow: 'auto' }}>
        {filteredMessages.map(msg => (
          <MessageItem
            key={msg.id}
            message={msg}
            onReact={handleReact}   // ✅ 引用稳定
            onReply={handleReply}   // ✅ 引用稳定
          />
        ))}
      </div>
    </div>
  )
}

function generateMessages(count) {
  const names = ['Alice', 'Bob', 'Charlie', 'Diana']
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    author: names[i % 4],
    text: `这是第 ${i + 1} 条消息的内容`,
    time: `${String(10 + i % 8).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}`,
    isMine: i % 3 === 0,
    reactions: Math.floor(Math.random() * 5)
  }))
}

const smallBtn = {
  padding: '2px 8px', fontSize: '12px',
  border: '1px solid #d9d9d9', borderRadius: '4px',
  backgroundColor: 'white', cursor: 'pointer'
}

// ============================================
// 示例：useCallback 配合 useEffect 避免死循环
// 功能：展示 useCallback 在 useEffect 依赖中的关键作用
// ============================================

import { useState, useEffect, useCallback } from 'react'

function SearchComponent() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [page, setPage] = useState(1)

  // ❌ 问题：每次渲染都是新函数，作为 useEffect 依赖会导致死循环
  // const fetchResults = async () => {
  //   const res = await fetch(`/api/search?q=${query}&page=${page}`)
  //   const data = await res.json()
  //   setResults(data)
  // }

  // ✅ 解决：useCallback 稳定函数引用
  const fetchResults = useCallback(async () => {
    // 模拟 API 请求
    const mockData = [
      { id: 1, title: `结果 ${query} - 第${page}页` },
      { id: 2, title: `相关文章关于 ${query}` },
      { id: 3, title: `${query} 的最佳实践` }
    ]
    setResults(mockData)
  }, [query, page])  // query 或 page 变化时才创建新函数

  // 依赖 fetchResults（稳定引用，不会死循环）
  useEffect(() => {
    if (query.trim()) {
      fetchResults()
    }
  }, [fetchResults])  // fetchResults 引用不变 → useEffect 不会重复执行

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto' }}>
      <h2>🔍 搜索（useCallback 演示）</h2>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="输入搜索关键词..."
        style={{ width: '100%', padding: '8px', border: '1px solid #d9d9d9', borderRadius: '4px' }}
      />
      <div style={{ marginTop: '8px', display: 'flex', gap: '8px', alignItems: 'center' }}>
        <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1}>上一页</button>
        <span>第 {page} 页</span>
        <button onClick={() => setPage(p => p + 1)}>下一页</button>
      </div>
      <ul style={{ marginTop: '12px', listStyle: 'none', padding: 0 }}>
        {results.map(r => (
          <li key={r.id} style={{ padding: '8px', borderBottom: '1px solid #f0f0f0' }}>
            {r.title}
          </li>
        ))}
      </ul>
      {!query && <p style={{ color: '#999', textAlign: 'center' }}>输入关键词开始搜索</p>}
    </div>
  )
}

function VirtualList({ items, itemHeight = 40, visibleHeight = 400 }) {
  const [scrollTop, setScrollTop] = useState(0)

  const visibleCount = Math.ceil(visibleHeight / itemHeight)
  const totalHeight = useMemo(() => items.length * itemHeight, [items.length, itemHeight])

  const { startIndex, endIndex, offsetY } = useMemo(() => {
    const start = Math.floor(scrollTop / itemHeight)
    const end = Math.min(start + visibleCount + 1, items.length)
    return { startIndex: start, endIndex: end, offsetY: start * itemHeight }
  }, [scrollTop, itemHeight, visibleCount, items.length])

  const visibleItems = useMemo(() => items.slice(startIndex, endIndex), [items, startIndex, endIndex])

  return (
    <div onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
      style={{ height: visibleHeight, overflowY: 'auto', border: '1px solid #ddd', borderRadius: 4 }}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ position: 'absolute', top: offsetY, width: '100%' }}>
          {visibleItems.map((item, i) => (
            <div key={startIndex + i} style={{ height: itemHeight, padding: '0 12px', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
              Row {startIndex + i}: {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

const ListItem = React.memo(function ListItem({ name, price, onRemove }) {
  console.log(`Rendering: ${name}`)
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: 8, borderBottom: '1px solid #f0f0f0' }}>
      <span>{name} - ${price}</span>
      <button onClick={() => onRemove(name)} style={{ color: '#ff4d4f', border: 'none', cursor: 'pointer' }}>Remove</button>
    </div>
  )
})

function ProductList() {
  const [products, setProducts] = useState([
    { name: 'Keyboard', price: 79 },
    { name: 'Mouse', price: 49 },
    { name: 'Monitor', price: 399 },
    { name: 'Headphones', price: 129 },
  ])
  const [filter, setFilter] = useState('')

  const handleRemove = useCallback((name) => {
    setProducts(prev => prev.filter(p => p.name !== name))
  }, [])

  const filtered = useMemo(() => products.filter(p => p.name.toLowerCase().includes(filter.toLowerCase())), [products, filter])

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <input value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filter..." style={{ width: '100%', padding: 8, marginBottom: 8, borderRadius: 4 }} />
      {filtered.map(p => <ListItem key={p.name} name={p.name} price={p.price} onRemove={handleRemove} />)}
    </div>
  )
}

function BadExample({ count }) {
  // ❌ 简单计算不需要 useMemo——创建 memo 开销 > 计算本身
  const doubled = useMemo(() => count * 2, [count])
  // ✅ 直接计算
  const doubledOk = count * 2

  // ❌ 每次渲染创建新对象作为 useMemo 依赖
  const config = useMemo(() => ({ count }), [count])
  const badResult = useMemo(() => config.count * 3, [config]) // config 每次是新引用！
  // ✅ 直接用基本类型作为依赖
  const goodResult = useMemo(() => count * 3, [count])

  return <p>Doubled: {doubledOk}, Tripled: {goodResult}</p>
}

function GoodExample({ items, query }) {
  // ✅ 过滤/排序大量数据用 useMemo
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    ).sort((a, b) => a.name.localeCompare(b.name))
  }, [items, query])

  // ✅ 传递给子组件的复杂对象用 useMemo
  const chartData = useMemo(() => ({
    labels: filtered.map(i => i.name),
    values: filtered.map(i => i.price),
  }), [filtered])

  return (
    <div>
      <p>Found: {filtered.length} items</p>
      <Chart data={chartData} />
    </div>
  )
}