React 学习总结：核心知识体系回顾

// components/ConcertCard.tsx：演唱会卡片组件
interface ConcertCardProps {
  title: string        // 演唱会名称
  singer: string       // 出演歌姬
  themeColor: string   // 粉丝团应援色
  onTicket: () => void // 点击购票时通知父组件
}

export default function ConcertCard({
  title,
  singer,
  themeColor,
  onTicket,
}: ConcertCardProps) {
  return (
    <article style={{ borderLeft: `4px solid ${themeColor}` }}>
      <h3>{title}</h3>
      <p>主演：{singer}</p>
      <button onClick={onTicket}>立即购票</button>
    </article>
  )
}

import { useState } from 'react'

// 播放器组件：管理当前播放歌曲与循环模式
export function Player() {
  const [current, setCurrent] = useState('星屑协奏曲')
  const [loop, setLoop] = useState(false)

  function next() {
    // 函数式更新：基于上一次状态计算，连续调用不会互相覆盖
    setCurrent((prev) => (prev === '星屑协奏曲' ? '雨声独奏' : '星屑协奏曲'))
  }

  return (
    <div>
      <p>
        正在播放：{current}（{loop ? '列表循环' : '单曲播放'}）
      </p>
      <button onClick={next}>下一首</button>
      <button onClick={() => setLoop((l) => !l)}>切换循环</button>
    </div>
  )
}

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

// 演唱会列表页：搜索过滤与副作用清理
export function ConcertList() {
  const [keyword, setKeyword] = useState('')
  const [concerts, setConcerts] = useState<{ id: number; city: string }[]>([])

  // 空依赖：仅在挂载后请求一次演出排期，卸载时中止请求
  useEffect(() => {
    const controller = new AbortController()
    fetch('/api/concerts', { signal: controller.signal })
      .then((r) => r.json())
      .then(setConcerts)
    return () => controller.abort()
  }, [])

  // useMemo：仅当排期或关键词变化时重新过滤，避免每次渲染都全量计算
  const matched = useMemo(
    () => concerts.filter((c) => c.city.includes(keyword)),
    [concerts, keyword],
  )

  return (
    <ul>
      {matched.map((c) => (
        <li key={c.id}>{c.city}场</li>
      ))}
    </ul>
  )
}

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

// 自定义 Hook：粉丝团加入逻辑，任意歌姬主页可复用
export function useFanClub(singerId: string) {
  const [joined, setJoined] = useState(false)
  const [members, setMembers] = useState(0)

  // 歌姬切换时重新拉取粉丝团人数
  useEffect(() => {
    fetch(`/api/fan-clubs/${singerId}`)
      .then((r) => r.json())
      .then((data) => setMembers(data.members))
  }, [singerId])

  const join = useCallback(async () => {
    setJoined(true)
    setMembers((m) => m + 1) // 实际项目中应先调用接口再回填
  }, [])

  return { joined, members, join }
}

import { createContext, useContext, useState, type ReactNode } from 'react'

// 应援色上下文：整站共享主题色，避免逐层传递 props
const ThemeColorContext = createContext('#7C6BFF')

// 消费侧封装：调用方无需感知 Context 细节
export function useThemeColor() {
  return useContext(ThemeColorContext)
}

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [color] = useState('#7C6BFF')
  return <ThemeColorContext value={color}>{children}</ThemeColorContext>
}

// app/singers/page.tsx：服务器组件，直接在服务端取数
interface Song {
  id: number
  title: string
  singer: string
}

// async 组件只在服务器执行，浏览器不会下载这段逻辑
export default async function SingerList() {
  const songs: Song[] = await fetch('https://api.fandex.dev/songs').then(
    (r) => r.json(),
  )

  return (
    <ul>
      {songs.map((s) => (
        <li key={s.id}>
          {s.title} - {s.singer}
        </li>
      ))}
    </ul>
  )
}

import { memo } from 'react'

// memo：props 不变时跳过重渲染，适合列表项这类纯展示组件
const SongItem = memo(function SongItem({
  title,
  singer,
}: {
  title: string
  singer: string
}) {
  return (
    <li>
      {title} - {singer}
    </li>
  )
})

export function SongList({
  songs,
}: {
  songs: { id: number; title: string; singer: string }[]
}) {
  return (
    <ul>
      {songs.map((s) => (
        <SongItem key={s.id} title={s.title} singer={s.singer} />
      ))}
    </ul>
  )
}

import { useDeferredValue, useState } from 'react'

// 歌曲搜索：输入立即回显，结果列表延迟计算
export function SongSearch({ songs }: { songs: string[] }) {
  const [keyword, setKeyword] = useState('')
  // deferredKeyword 滞后于 keyword，触发低优先级重渲染
  const deferredKeyword = useDeferredValue(keyword)

  const matched = songs.filter((s) => s.includes(deferredKeyword))

  return (
    <>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="搜索歌曲或 P 主"
      />
      <ul>
        {matched.map((s) => (
          <li key={s}>{s}</li>
        ))}
      </ul>
    </>
  )
}

// 错误：原地 push 不会触发重渲染
songs.push(newSong)
setSongs(songs)

// 修正：基于旧状态创建新数组
setSongs((prev) => [...prev, newSong])

// 错误：没有依赖数组，每次渲染都发请求
useEffect(() => {
  fetch('/api/concerts').then((r) => r.json()).then(setConcerts)
})

// 修正：空依赖表示只在挂载后执行一次
useEffect(() => {
  fetch('/api/concerts').then((r) => r.json()).then(setConcerts)
}, [])

// 错误：收藏或排序后，下标与内容错位，组件状态串行
{songs.map((s, i) => <SongItem key={i} title={s.title} />)}

// 修正：使用数据中稳定的唯一标识
{songs.map((s) => <SongItem key={s.id} title={s.title} />)}

// 错误：提前 return 后 Hook 调用次数变化，违反 Hooks 规则
if (!singerId) return <p>未选择歌姬</p>
useEffect(() => loadFans(singerId), [singerId])

// 修正：所有 Hook 调用置于组件顶部，条件只影响 Hook 内部逻辑
useEffect(() => {
  if (singerId) loadFans(singerId)
}, [singerId])
if (!singerId) return <p>未选择歌姬</p>

// 错误：服务器组件不支持 useState 与 onClick
export default function VoteButton() {
  const [count, setCount] = useState(0) // 构建直接报错
  return <button onClick={() => setCount(count + 1)}>投票 {count}</button>
}

// 修正：交互部分独立成文件，顶部声明 'use client'
'use client'
export function VoteButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>投票 {count}</button>
}

// 错误：组件反复挂载后，同一个直播间被订阅了多次
useEffect(() => {
  socket.on('concert', handleUpdate)
}, [])

// 修正：返回清理函数，卸载时移除监听
useEffect(() => {
  socket.on('concert', handleUpdate)
  return () => socket.off('concert', handleUpdate)
}, [])

// 错误：复制 props 到 state，props 更新后列表不同步
const [list, setList] = useState(songs)

// 修正：渲染期直接从 props 派生，计算昂贵时用 useMemo 缓存
const list = useMemo(() => songs.filter((s) => s.liked), [songs])

// 错误：修改了自己依赖的状态，无限重渲染直至浏览器崩溃
const [count, setCount] = useState(0)
useEffect(() => {
  setCount(count + 1)
}, [count])

// 修正：定时类需求用函数式更新加清理函数，依赖保持为空
useEffect(() => {
  const id = window.setInterval(() => setCount((c) => c + 1), 1000)
  return () => window.clearInterval(id)
}, [])