React 学习 Day 02：受控表单、DOM、组件通信与 Hooks

1<html>               ← 根节点
2  <body>             ← 对象 { tagName: 'BODY', children: [...] }
3    <div>
4      <input />      ← ref.current 拿到的就是这个对象
5    </div>
6  </body>
7</html>

1el.focus()                       // 方法
2el.value                          // 属性
3el.getBoundingClientRect()        // 尺寸
4document.createElement('div')     // 创建节点

 1import { useState } from 'react'
 2
 3function ControlledForm() {
 4  const [text, setText] = useState('')
 5
 6  return (
 7    <form onSubmit={(e) => { e.preventDefault(); alert(text) }}>
 8      <input
 9        type="text"
10        value={text}
11        onChange={(e) => setText(e.target.value)}
12      />
13      {/* 受控的优势：每一次按键都能即时派生 */}
14      <p>大写：{text.toUpperCase()}</p>
15      <p>字符数：{text.length}</p>
16    </form>
17  )
18}

 1import { useRef } from 'react'
 2
 3function UncontrolledForm() {
 4  const inputRef = useRef(null)
 5
 6  const handleSubmit = (e) => {
 7    e.preventDefault()
 8    alert(inputRef.current.value)   // 提交时才读 DOM
 9  }
10
11  return (
12    <form onSubmit={handleSubmit}>
13      {/* 非受控用 defaultValue 设初值，不是 value */}
14      <input type="text" ref={inputRef} defaultValue="默认值" />
15      <button type="submit">提交</button>
16    </form>
17  )
18}

 1function FileInput() {
 2  const fileRef = useRef(null)
 3  const handleSubmit = (e) => {
 4    e.preventDefault()
 5    const file = fileRef.current.files[0]
 6    alert(file ? `已选择：${file.name}` : '未选择文件')
 7  }
 8  return (
 9    <form onSubmit={handleSubmit}>
10      <input type="file" ref={fileRef} />
11      <button type="submit">提交</button>
12    </form>
13  )
14}

1// ❌ 直接改样式，下次渲染可能被冲掉
2ref.current.style.color = 'red'

1const ref = useRef(null)
2// ...
3<input ref={ref} />
4// ref.current 即该 DOM 节点

 1import { useEffect, useRef, useState } from 'react'
 2
 3function DomRef() {
 4  const inputRef = useRef(null)
 5  const boxRef = useRef(null)
 6  const [size, setSize] = useState('')
 7
 8  // ① 挂载后自动聚焦：DOM 操作必须放 useEffect，不能放渲染期
 9  useEffect(() => {
10    inputRef.current.focus()
11  }, [])
12
13  // ② 命令式聚焦（按钮触发）
14  const handleFocus = () => inputRef.current.focus()
15
16  // ③ 读 DOM 信息（尺寸）
17  const handleMeasure = () => {
18    const rect = boxRef.current.getBoundingClientRect()
19    setSize(`宽 ${Math.round(rect.width)}px × 高 ${Math.round(rect.height)}px`)
20  }
21
22  return (
23    <div>
24      <input ref={inputRef} placeholder="挂载后自动聚焦" />
25      <button onClick={handleFocus}>手动聚焦</button>
26      <div ref={boxRef} style={{ width: 200, height: 80, background: '#eee' }}>
27        量一下我的尺寸
28      </div>
29      <button onClick={handleMeasure}>测量</button>
30      <p>{size}</p>
31    </div>
32  )
33}

1src/comment2/
2├── CommentApp.jsx      # 容器：state + handleAdd/handleDelete + 排序
3├── CommentTabs.jsx     # 最热/最新 Tab + 高亮
4├── CommentInput.jsx    # 受控输入 + 发布按钮
5├── CommentList.jsx     # 渲染列表 + 空状态
6├── CommentItem.jsx     # 单条评论，自己的才显示删除
7└── comment.module.css

1const [comments, setComments] = useState(initialComments)
2const [activeTab, setActiveTab] = useState('hottest')
3const [inputValue, setInputValue] = useState('')

 1const handleAdd = () => {
 2  const content = inputValue.trim()
 3  if (!content) return                  // ① 校验非空
 4
 5  const newComment = {
 6    id: Date.now(),
 7    uid: currentUserId,
 8    author: '我',
 9    content,
10    date: new Date().toISOString().slice(0, 10),
11    likes: 0,
12  }
13  setComments([newComment, ...comments]) // ② 头部插入（不可变）
14  setInputValue('')                      // ③ 清空输入框
15}

 1// 父：把 state 和逻辑通过 props 接进去
 2<CommentInput
 3  value={inputValue}
 4  onChange={setInputValue}
 5  onSubmit={handleAdd}
 6/>
 7
 8// 子：受控绑定 + 把 event 解包成纯字符串
 9<input
10  value={value}
11  onChange={(e) => onChange(e.target.value)}
12/>
13<button onClick={onSubmit} disabled={!value.trim()}>发布</button>

1{isOwn && <button onClick={() => onDelete(comment.id)}>删除</button>}

1// 子组件 CommentInput
2const inputRef = useRef(null)
3
4const handleSubmit = () => {
5  onSubmit()               // → 父发表 + setInputValue('')  清空
6  inputRef.current.focus() // → DOM 聚焦
7}

 1import classNames from 'classnames'
 2import styles from './comment.module.css'
 3
 4function CommentInput({ value, onChange, className }) {
 5  return (
 6    <input className={classNames(styles.input, className)} ... />
 7  )
 8}
 9
10// 调用方传自己的 CSS Module 类
11<CommentInput className={myStyles.warnInput} />

1<input
2  className={classNames(styles.input, {
3    [styles.warn]: variant === 'warn',
4    [styles.large]: variant === 'large',
5  })}
6/>
7
8<CommentInput variant="warn" />

1<CommentInput style={{ borderColor: hasError ? 'red' : undefined }} />

1import { v4 as uuidv4 } from 'uuid'   // 第三方库（需 npm i uuid）
2const id1 = crypto.randomUUID()       // 浏览器内置（推荐，零依赖），返回标准 v4
3const id2 = uuidv4()                  // uuid 库，需要 v1/v7 等版本时装

 1const now = new Date()
 2now.toISOString()     // '2026-07-05T...' 带 T/Z
 3now.toLocaleString()  // 本地化
 4
 5// 手动拼 YYYY-MM-DD HH:mm:ss
 6const pad = (n) => String(n).padStart(2, '0')
 7const s = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ` +
 8          `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
 9
10// 相对时间
11function timeAgo(date) {
12  const diff = (Date.now() - new Date(date).getTime()) / 1000
13  if (diff < 60) return '刚刚'
14  if (diff < 3600) return `${Math.floor(diff / 60)} 分钟前`
15  if (diff < 86400) return `${Math.floor(diff / 3600)} 小时前`
16  return `${Math.floor(diff / 86400)} 天前`
17}

1<Child count={count} />
2function Child({ count }) {
3  return <p>{count}</p>
4}

1// 案例 src/components/ChildToParent.jsx
2function Sender({ onSendNum }) {
3  return <button onClick={() => onSendNum(1)}>给父 +1</button>
4}
5function ChildToParent() {
6  const [num, setNum] = useState(0)
7  const handleNum = (n) => setNum((c) => c + n)   // ① 父定义函数
8  return <Sender onSendNum={handleNum} />          // ② 把函数传下去
9}

 1// 案例 src/components/LiftingState.jsx
 2function LiftingState() {
 3  const [name, setName] = useState('')
 4  return (
 5    <>
 6      <NameInput value={name} onChange={setName} />  {/* A 写 */}
 7      <Greeting name={name} />                        {/* B 读 */}
 8    </>
 9  )
10}

 1// 案例 src/components/ContextDemo.jsx
 2const ThemeContext = createContext('light')          // ① 创建
 3function ThemeProvider({ children }) {
 4  const [theme, setTheme] = useState('light')
 5  return (
 6    <ThemeContext.Provider value={{ theme, toggle }}>  {/* ② 顶层提供 */}
 7      {children}
 8    </ThemeContext.Provider>
 9  )
10}
11function ThemedBox() {
12  const { theme } = useContext(ThemeContext)         // ③ 任意后代直接取
13  return <div>当前主题：{theme}</div>
14}

1useEffect(() => {...})          // 不传：每次渲染后都跑（少用，易死循环）
2useEffect(() => {...}, [])      // 空数组：只在挂载后跑一次
3useEffect(() => {...}, [count]) // 有依赖：挂载后 + count 变化时跑

 1function Timer() {
 2  const [seconds, setSeconds] = useState(0)
 3  useEffect(() => {
 4    const id = setInterval(() => setSeconds((s) => s + 1), 1000)
 5    return () => clearInterval(id)          // ← 清理函数：卸载时清定时器
 6  }, [])
 7  return <p>{seconds} 秒</p>
 8}
 9
10function UseEffectDemo() {
11  const [count, setCount] = useState(0)
12  useEffect(() => {
13    document.title = `点击 ${count} 次`       // count 变才同步标签页标题
14  }, [count])
15  return <button onClick={() => setCount((c) => c + 1)}>+1</button>
16}

1// 案例 src/components/CleanupDemo.jsx —— 鼠标监听
2useEffect(() => {
3  const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY })
4  window.addEventListener('mousemove', handleMove)
5  return () => window.removeEventListener('mousemove', handleMove)  // 清理
6}, [])

 1// src/hooks/useMousePosition.js
 2function useMousePosition() {
 3  const [pos, setPos] = useState({ x: 0, y: 0 })
 4  useEffect(() => {
 5    const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY })
 6    window.addEventListener('mousemove', handleMove)
 7    return () => window.removeEventListener('mousemove', handleMove)
 8  }, [])
 9  return pos                         // 返回数据，不是 JSX
10}
11// 用：const pos = useMousePosition()

 1// src/hooks/useLocalStorage.js
 2function useLocalStorage(key, initialValue) {
 3  const [value, setValue] = useState(() => {
 4    const saved = localStorage.getItem(key)
 5    return saved !== null ? JSON.parse(saved) : initialValue
 6  })
 7  useEffect(() => {
 8    localStorage.setItem(key, JSON.stringify(value))
 9  }, [key, value])
10  return [value, setValue]
11}

1// src/hooks/useToggle.js
2function useToggle(initial = false) {
3  const [value, setValue] = useState(initial)
4  const toggle = (next) => {
5    setValue((prev) => (typeof next === 'boolean' ? next : !prev))
6    //                                  ↑ prev 就是 value（同一个当前值），由 React 传入
7  }
8  return [value, toggle]
9}

1npm install --save-dev json-server@0.17.4   # 装一次
2npm run server                               # 启动：json-server --watch db.json --port 3004

 1// src/comment3/useComments.js
 2function useComments(url) {
 3  const [comments, setComments] = useState([])
 4  const [loading, setLoading] = useState(true)
 5  const [error, setError] = useState(null)
 6
 7  useEffect(() => {
 8    let cancelled = false                      // 清除副作用：卸载后别再 setState
 9    const fetchData = async () => {
10      setLoading(true)
11      try {
12        const res = await fetch(url)
13        if (!res.ok) throw new Error(`请求失败：${res.status}`)
14        const data = await res.json()
15        if (!cancelled) setComments(data)
16      } catch (e) {
17        if (!cancelled) setError(e.message)
18      } finally {
19        if (!cancelled) setLoading(false)
20      }
21    }
22    fetchData()
23    return () => { cancelled = true }
24  }, [url])
25
26  return { comments, loading, error }
27}

 1// src/comment3/CommentItem.jsx
 2function CommentItem({ comment }) {
 3  return (
 4    <li className={styles.item}>
 5      <div className={styles.avatar}>{comment.author.slice(0, 1)}</div>
 6      <div className={styles.body}>
 7        <div className={styles.header}>
 8          <span className={styles.author}>{comment.author}</span>
 9          <span className={styles.date}>{comment.date}</span>
10        </div>
11        <p className={styles.content}>{comment.content}</p>
12        <span className={styles.likes}>👍 {comment.likes}</span>
13      </div>
14    </li>
15  )
16}

 1function CommentApp() {
 2  const { comments, loading, error } = useComments('http://localhost:3004/list')
 3  return (
 4    <div className={styles.container}>
 5      {loading && <p>⏳ 加载中...</p>}
 6      {error && <p>❌ 出错了：{error}</p>}
 7      {!loading && !error && (
 8        <ul>
 9          {comments.map((c) => <CommentItem key={c.id} comment={c} />)}
10        </ul>
11      )}
12    </div>
13  )
14}