import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  )
}

import { useEffect, useState } from 'react'

function DataFetcher() {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData)
  }, [])
  
  return <div>{data ? JSON.stringify(data) : '加载中...'}</div>
}

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      return initialValue
    }
  })
  
  const setValue = (value) => {
    try {
      setStoredValue(value)
      window.localStorage.setItem(key, JSON.stringify(value))
    } catch (error) {
      console.error('Failed to save to localStorage', error)
    }
  }
  
  return [storedValue, setValue]
}

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
  
  componentDidMount() {
    // 生命周期逻辑
  }
  
  componentDidUpdate() {
    // 更新逻辑
  }
  
  render() {
    return <div>{this.state.count}</div>
  }
}

function Counter() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    // 生命周期逻辑
  }, [])
  
  return <div>{count}</div>
}

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

const handleClick = useCallback(() => {
  doSomething(a, b)
}, [a, b])