const ref = useRef(initialValue)
// ref 的结构：{ current: initialValue }

import { useRef } from 'react'

function MyComponent() {
  const intervalRef = useRef(null)

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      console.log('设置定时器')
    }, 1000)

    // 清理函数
    return () => {
      clearInterval(intervalRef.current)
    }
  }, []) // 空依赖数组表示只在组件挂载时执行

  return <div>{/* 组件内容 */}</div>
}

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

function MessageSender() {
  const [message, setMessage] = useState('')

  // 关键：创建一个 Ref 来“镜像”最新的 message
  const latestMessageRef = useRef('')

  // 每次渲染，都把最新的 state 同步给 ref
  // 这步操作是同步的，且不会触发副作用
  useEffect(() => {
    latestMessageRef.current = message
  }, [message])

  const handleSend = () => {
    setTimeout(() => {
      // 错误写法：console.log(message); // 这里永远是3秒前的值（闭包陷阱）

      // 正确写法：读取 Ref
      alert(`发送消息: ${latestMessageRef.current}`)
    }, 3000)
  }

  return (
    <div className="p-4 border rounded">
      <h3>场景：解决异步闭包问题</h3>
      <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="输入消息..." />
      <button onClick={handleSend}>3秒后发送</button>
      <p className="text-sm text-gray-500">点击发送后，试着立刻修改输入框内容</p>
    </div>
  )
}

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

// 封装成一个通用的 Hook
function usePrevious(value) {
  const ref = useRef()

  useEffect(() => {
    ref.current = value // 在渲染完成后，记录当前值，供下一次渲染使用
  }, [value])

  return ref.current // 返回的是“上一次”的值
}

function StockTicker() {
  const [price, setPrice] = useState(100)
  const prevPrice = usePrevious(price) // 获取上一次的价格

  // 计算趋势
  let trend = ''
  if (prevPrice && price > prevPrice) trend = '涨了'
  if (prevPrice && price < prevPrice) trend = '跌了'

  return (
    <div className="p-4 border rounded mt-4">
      <h3>场景：记录上一次的值</h3>
      <p>当前价格: ${price}</p>
      <p>上次价格: ${prevPrice}</p>
      <p>趋势: {trend}</p>

      <button onClick={() => setPrice((p) => p + 10)}>加价</button>
      <button onClick={() => setPrice((p) => p - 10)}>降价</button>
    </div>
  )
}

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

function AutoSaveForm() {
  const [text, setText] = useState('')
  const isMountedRef = useRef(false) // 标记是否已经挂载

  useEffect(() => {
    // 如果是第一次渲染，将标记设为 true，然后直接结束
    if (!isMountedRef.current) {
      isMountedRef.current = true
      return
    }

    // 从第二次渲染开始，才会执行下面的逻辑
    console.log('正在保存草稿到服务器...', text)
  }, [text])

  return (
    <div className="p-4 border rounded mt-4">
      <h3>场景：跳过首次渲染 (AutoSave)</h3>
      <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="开始打字以触发自动保存..." />
    </div>
  )
}

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

function useUpdateEffect(effect, deps) {
  const isMountedRef = useRef(false)

  useEffect(() => {
    if (!isMountedRef.current) {
      isMountedRef.current = true
      return
    }

    return effect()
  }, deps)
}

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

  // 只在 count 更新时打印日志，首次渲染时不打印
  useUpdateEffect(() => {
    console.log('Count updated:', count)
  }, [count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}