核心概念对比

import { useState, useMemo } from 'react'

interface User {
  name: string
  age: number
  email?: string
}

function Counter() {
  const [count, setCount] = useState<number>(0)
  const [user, setUser] = useState<User>({
    name: 'Alice', age: 25
  })

  // 手动追踪 count 的派生值
  const doubleCount = useMemo(
    () => count * 2,
    [count]
  )

  const increment = () => {
    setCount(prev => prev + 1)
  }

  const addProp = () => {
    // 创建新对象即可，无需特殊 API
    setUser(prev => ({ ...prev, email: 'a@b.com' }))
  }
}

import { useState, useEffect } from 'react'

interface Item {
  id: string
  name: string
}

function ItemList() {
  const [items, setItems] = useState<Item[]>([])

  // mounted + beforeDestroy 合并到一个 effect
  useEffect(() => {
    fetchItems()

    const timer = setInterval(() => {
      fetchItems()
    }, 5000)

    // cleanup: 等价于 beforeDestroy
    return () => {
      clearInterval(timer)
    }
  }, [])  // 空依赖 = 只在 mount/unmount 时执行

  // watch items 的变化
  useEffect(() => {
    console.log('items changed', items.length)
  }, [items])  // 依赖数组 = watch 目标
}

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

interface User {
  id: string
  name: string
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([])
  const [search, setSearch] = useState('')
  const [loading, setLoading] = useState(false)
  const [selectedUser, setSelectedUser] =
    useState<User | null>(null)

  // computed: filteredUsers
  const filteredUsers = useMemo(() => {
    return users.filter(u =>
      u.name.toLowerCase()
        .includes(search.toLowerCase())
    )
  }, [users, search])

  // computed: filteredCount（直接用派生值）
  const filteredCount = filteredUsers.length

  // mounted: 获取数据
  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true)
      const res = await fetch('/api/users')
      const data = await res.json()
      setUsers(data)
      setLoading(false)
    }
    fetchUsers()
  }, [])

  // methods: 用 useCallback 缓存
  const selectUser = useCallback(
    (user: User) => setSelectedUser(user),
    []
  )

  return (
    <div className="user-list">
      <h2>用户列表 ({filteredCount})</h2>

      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="搜索用户..."
      />

      {loading ? (
        <div>加载中...</div>
      ) : (
        <ul>
          {filteredUsers.map(user => (
            <li
              key={user.id}
              onClick={() => selectUser(user)}
            >
              {user.name}
            </li>
          ))}
        </ul>
      )}

      {selectedUser && (
        <div>
          <p>选中: {selectedUser.name}</p>
        </div>
      )}
    </div>
  )
}

export default UserList

import { useRef, useEffect } from 'react'

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null)

  // mounted: 自动聚焦
  useEffect(() => {
    inputRef.current?!.focus()
  }, [])

  const focusInput = () => {
    inputRef.current?!.focus()
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>
        聚焦
      </button>
    </>
  )
}

import React, {
  createContext, useContext, useState
} from 'react'

// 1. 创建 Context
interface ThemeContextType {
  theme: string
  updateTheme: (val: string) => void
}

const ThemeContext = createContext<
  ThemeContextType
>({ theme: 'light', updateTheme: () => {} })

// 2. 祖先组件：Provider
function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider
      value={{ theme, updateTheme: setTheme }}
    >
      <Child />
    </ThemeContext.Provider>
  )
}

// 3. 后代组件：useContext
function Child() {
  const { theme, updateTheme } =
    useContext(ThemeContext)

  return (
    <div className={theme}>
      <button
        onClick={() => updateTheme('dark')}
      >
        切换主题
      </button>
    </div>
  )
}