// JSX 写法
const element = <h1 className="title">Hello, world!</h1>

// 编译后等价于
const element = React.createElement('h1', { className: 'title' }, 'Hello, world!')

// key 的正确使用
{
  items.map((item) => (
    <li key={item.id}>{item.name}</li> // Good: 使用稳定唯一的 id
  ))
}

{
  items.map((item, index) => (
    <li key={index}>{item.name}</li> // Bad: 避免使用 index 作为 key
  ))
}

// 利用 key 重置组件状态
// 当 userId 发生变化时，整个 UserProfile 组件会被卸载并重新挂载
// 内部所有 state 都会重置为初始值，而不是残留上一个用户的数据
<UserProfile key={userId} userId={userId} />

function ControlledInput() {
  const [value, setValue] = useState('')
  return <input value={value} onChange={(e) => setValue(e.target.value)} />
}

function UncontrolledInput() {
  const inputRef = useRef(null)
  const handleSubmit = () => {
    console.log(inputRef.current.value)
  }
  return <input ref={inputRef} defaultValue="hello" />
}

function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <Spinner />
    return <WrappedComponent {...props} />
  }
}

const UserListWithLoading = withLoading(UserList)

const [state, setState] = useState(initialValue)

// Bad: 可能拿到过期状态
// 两次 setCount 都基于同一个闭包中的 count 值计算
setCount(count + 1)
setCount(count + 1) // 结果只 +1

// Good: 函数式更新，确保基于最新状态
// prev 参数始终是上一次更新后的最新值
setCount((prev) => prev + 1)
setCount((prev) => prev + 1) // 结果 +2

// 只在组件挂载时计算一次，后续渲染不会再执行
const [data, setData] = useState(() => expensiveComputation())

useEffect(() => {
  // 副作用逻辑（挂载/更新时执行）
  return () => {
    // 清理函数（组件卸载时执行，或下次 effect 执行前执行）
    // 用于取消订阅、清除定时器、取消网络请求等
  }
}, [dependencies])

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

  useEffect(() => {
    const timer = setInterval(() => {
      // 由于依赖数组为空，这个 effect 只在挂载时执行一次
      // 内部的 count 永远是挂载时闭包捕获的值 0
      console.log(count) // 始终打印 0
    }, 1000)
    return () => clearInterval(timer)
  }, []) // 空依赖

  // 解决方案：使用 ref 或添加依赖
}

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b])
const memoizedFn = useCallback(() => doSomething(a), [a])

// useCallback(fn, deps) 等价于 useMemo(() => fn, deps)

// 1. 访问 DOM 元素（最常见用途）
const inputRef = useRef(null)
<input ref={inputRef} />
inputRef.current.focus()

// 2. 保存可变值（不触发重新渲染）
// 适合存储定时器 ID、WebSocket 实例等不需要渲染的数据
const timerRef = useRef(null)
timerRef.current = setInterval(...)

// 3. 跨渲染周期保存前一个值
// ref 的更新发生在 useEffect 中（渲染后），所以读到的是上一次渲染的值
function usePrevious(value) {
  const ref = useRef()
  useEffect(() => { ref.current = value })
  return ref.current
}

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch {
      return initialValue
    }
  })

  const setValue = useCallback(
    (value) => {
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore)
      localStorage.setItem(key, JSON.stringify(valueToStore))
    },
    [key, storedValue]
  )

  return [storedValue, setValue]
}

const ThemeContext = createContext('light')

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Page />
    </ThemeContext.Provider>
  )
}

function Button() {
  const { theme } = useContext(ThemeContext)
  return <button className={theme}>Click</button>
}

const [state, dispatch] = useReducer(reducer, initialState)

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      throw new Error()
  }
}

const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  return items.map((item) => (
    <div key={item.id} onClick={() => onSelect(item.id)}>
      {item.name}
    </div>
  ))
})

// 自定义比较函数
const MemoComp = React.memo(Component, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id // true 跳过渲染
})

const Dashboard = lazy(() => import('./Dashboard'))

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

// 1. 状态拆分：将频繁变化的状态隔离
function App() {
  return (
    <>
      <FrequentUpdater /> {/* 频繁更新的部分独立成组件 */}
      <ExpensiveStatic /> {/* 不受影响 */}
    </>
  )
}

// 2. children 模式：通过 children 传递避免重新渲染
function Layout({ children }) {
  const [scroll, setScroll] = useState(0)
  return (
    <div onScroll={(e) => setScroll(e.target.scrollTop)}>
      <Header scroll={scroll} />
      {children} {/* children 不会因 scroll 变化而重渲染 */}
    </div>
  )
}

import { BrowserRouter, Routes, Route, Outlet, useParams, useNavigate } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<Users />}>
            <Route path=":id" element={<UserDetail />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

function Layout() {
  const navigate = useNavigate()
  return (
    <div>
      <nav>...</nav>
      <Outlet /> {/* 嵌套路由出口 */}
    </div>
  )
}

// React 18 之前：setTimeout 中的更新不会批处理
// React 18：自动批处理所有更新
setTimeout(() => {
  setCount((c) => c + 1)
  setFlag((f) => !f)
  // 只触发一次重新渲染
}, 1000)

import { useTransition, startTransition } from 'react'

function SearchPage() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [isPending, startTransition] = useTransition()

  function handleChange(e) {
    setQuery(e.target.value) // 紧急：更新输入框
    startTransition(() => {
      setResults(filterResults(e.target.value)) // 非紧急：可中断
    })
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <ResultList results={results} />}
    </>
  )
}

// 客户端数据获取（配合支持 Suspense 的库）
;<Suspense fallback={<Skeleton />}>
  <Comments />
</Suspense>

// 流式 SSR（React 18）
import { renderToPipeableStream } from 'react-dom/server'

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/main.js'],
  onShellReady() {
    response.statusCode = 200
    response.setHeader('content-type', 'text/html')
    pipe(response)
  },
})

function PasswordField() {
  const id = useId()
  return (
    <>
      <label htmlFor={`${id}-password`}>密码</label>
      <input id={`${id}-password`} type="password" />
      <p id={`${id}-hint`}>密码至少 8 位</p>
    </>
  )
}

// React 19 之前需要手动优化
const MemoComp = React.memo(({ data }) => {
  const processed = useMemo(() => expensiveWork(data), [data])
  return <div>{processed}</div>
})

// React 19 编译器自动处理，直接写即可
function Comp({ data }) {
  const processed = expensiveWork(data)
  return <div>{processed}</div>
}

// 读取 Promise
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise) // Suspense 会处理 pending 状态
  return comments.map((c) => <p key={c.id}>{c.text}</p>)
}

// 读取 Context（可在条件语句中使用，useContext 不行）
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext)
    return <div className={theme} />
  }
  return <div />
}

// ServerComponent.jsx（默认是 Server Component）
async function UserProfile({ userId }) {
  const user = await db.user.findById(userId) // 直接访问数据库
  return <div>{user.name}</div>
}

// ClientComponent.jsx
;('use client')
function LikeButton() {
  const [liked, setLiked] = useState(false)
  return <button onClick={() => setLiked(!liked)}>{liked ? 'Liked' : 'Like'}</button>
}

// useFormStatus — 获取表单提交状态
'use client'
import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? '提交中...' : '提交'}</button>
}

// useOptimistic — 乐观更新
function Messages({ messages, sendMessage }) {
  const [optimisticMessages, addOptimistic] = useOptimistic(messages, (state, newMsg) => [...state, { text: newMsg, sending: true }])

  async function handleSend(formData) {
    const msg = formData.get('message')
    addOptimistic(msg)
    await sendMessage(msg)
  }

  return (
    <form action={handleSend}>
      {optimisticMessages.map((m) => (
        <p key={m.text}>{m.text}</p>
      ))}
      <input name="message" />
    </form>
  )
}

function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 })
  return <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>{render(pos)}</div>
}

;<MouseTracker
  render={({ x, y }) => (
    <p>
      位置：{x}, {y}
    </p>
  )}
/>

function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex)
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      {children}
    </TabsContext.Provider>
  )
}

Tabs.Tab = function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext)
  return <button onClick={() => setActiveIndex(index)}>{children}</button>
}

// 使用
<Tabs>
  <Tabs.Tab index={0}>标签1</Tabs.Tab>
  <Tabs.Tab index={1}>标签2</Tabs.Tab>
</Tabs>

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <h1>出了点问题</h1>
    }
    return this.props.children
  }
}

// 使用
;<ErrorBoundary>
  <UserProfile />
</ErrorBoundary>

src/
├── components/        # 通用 UI 组件
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
├── features/          # 按功能模块组织
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── types.ts
├── hooks/             # 全局自定义 Hooks
├── lib/               # 工具函数
├── stores/            # 全局状态管理
├── types/             # TypeScript 类型
└── app/               # 路由与页面

// 组件 Props 类型
interface ButtonProps {
  variant: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
}

// 事件处理
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  console.log(e.target.value)
}

// Ref 类型
const inputRef = useRef<HTMLInputElement>(null)

// 泛型组件
interface ListProps<T> {
  items: T[]
  renderItem: (item: T) => React.ReactNode
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>
}

{
  type: ComponentType,      // 组件类型（函数、类或标签名）
  key: string | null,
  stateNode: DOM | Instance, // 关联的 DOM 节点或组件实例
  child: Fiber | null,       // 第一个子节点
  sibling: Fiber | null,     // 下一个兄弟节点
  return: Fiber | null,      // 父节点（回溯指针）
  pendingProps: object,      // 本次渲染待处理的 props
  memoizedState: object,     // 上次渲染完成后的 state（Hooks 链表也存在这里）
  lanes: number,             // 优先级通道（用二进制位表示）
}

// 使用 @testing-library/react
import { render, screen, fireEvent, waitFor } from '@testing-library/react'

test('搜索功能', async () => {
  render(<SearchComponent />)

  const input = screen.getByPlaceholderText('搜索...')
  fireEvent.change(input, { target: { value: 'React' } })

  await waitFor(() => {
    expect(screen.getByText('React 教程')).toBeInTheDocument()
  })
})

// 测试自定义 Hook
import { renderHook, act } from '@testing-library/react'

test('useCounter', () => {
  const { result } = renderHook(() => useCounter())

  act(() => result.current.increment())

  expect(result.current.count).toBe(1)
})