// 从 react 中解构导入 useState
import { useState } from 'react'

function Counter() {
  // useState(初始值) 返回一个数组：[当前值, 更新函数]
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)    // 更新状态，React 会自动重新渲染组件
  }

  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}

import { useState } from 'react'

function ArticleManager() {
  const [title, setTitle] = useState('默认标题')

  // 错误写法：直接修改
  // title = '新标题'  // React 不知道你改了，不会重新渲染

  // 正确写法：通过 setter 更新
  function updateTitle() {
    setTitle('新标题')  // React 知道状态变了，会重新渲染
  }

  return (
    <div>
      <p>{title}</p>
      <button onClick={updateTitle}>修改标题</button>
    </div>
  )
}

import { useState } from 'react'

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习 React', done: false },
    { id: 2, text: '写博客', done: true }
  ])

  // 添加一项：展开旧数组 + 新元素
  function addTodo(text) {
    const newTodo = { id: Date.now(), text, done: false }
    setTodos([...todos, newTodo])        // 用展开运算符创建新数组
  }

  // 修改一项：map 遍历，找到要改的，返回新对象
  function toggleTodo(id) {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ))
  }

  // 删除一项：filter 过滤掉不想要的
  function removeTodo(id) {
    setTodos(todos.filter(todo => todo.id !== id))
  }

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.done ? <s>{todo.text}</s> : todo.text}
        </li>
      ))}
    </ul>
  )
}

import { useState, useMemo } from 'react'

function ArticleFilter() {
  const [articles] = useState([
    { id: 1, title: 'React 入门', category: 'React' },
    { id: 2, title: 'Promise 详解', category: 'JavaScript' },
    { id: 3, title: 'Grid 布局', category: 'CSS' },
    { id: 4, title: 'React Hooks', category: 'React' }
  ])
  const [activeCategory, setActiveCategory] = useState('全部')

  // useMemo 缓存过滤结果，只有依赖变化时才重新计算
  const filteredArticles = useMemo(() => {
    console.log('重新计算过滤结果')  // 验证缓存效果
    if (activeCategory === '全部') return articles
    return articles.filter(a => a.category === activeCategory)
  }, [articles, activeCategory])  // 依赖数组

  // 用 useMemo 计算统计数据
  const totalCount = useMemo(() => articles.length, [articles])
  const filteredCount = useMemo(() => filteredArticles.length, [filteredArticles])

  return (
    <div>
      <p>共 {totalCount} 篇，当前 {filteredCount} 篇</p>
      <button onClick={() => setActiveCategory('全部')}>全部</button>
      <button onClick={() => setActiveCategory('React')}>React</button>
      <button onClick={() => setActiveCategory('JavaScript')}>JavaScript</button>
      <button onClick={() => setActiveCategory('CSS')}>CSS</button>

      {filteredArticles.map(a => (
        <div key={a.id}><h3>{a.title}</h3><span>{a.category}</span></div>
      ))}
    </div>
  )
}

// 文件路径：src/App.jsx
import { useState, useMemo } from 'react'
import './App.css'

function App() {
  const [articles] = useState([
    { id: 1, title: 'React 入门完全指南', summary: '从零开始学 React', category: 'React', date: '2024-05-10' },
    { id: 2, title: 'JS 异步编程详解', summary: '搞懂 Promise 和 async/await', category: 'JavaScript', date: '2024-05-08' },
    { id: 3, title: 'CSS Grid 布局实战', summary: '用 Grid 实现响应式布局', category: 'CSS', date: '2024-05-05' },
    { id: 4, title: 'React Hooks 深入', summary: '深入理解 useState 和 useEffect', category: 'React', date: '2024-05-03' },
    { id: 5, title: 'Flexbox 完全指南', summary: '一文学会弹性布局', category: 'CSS', date: '2024-05-01' },
  ])

  const [activeCategory, setActiveCategory] = useState('全部')

  // 提取所有分类（去重）
  const categories = useMemo(() => {
    const cats = articles.map(a => a.category)
    return ['全部', ...new Set(cats)]
  }, [articles])

  // 根据分类过滤文章
  const filteredArticles = useMemo(() => {
    if (activeCategory === '全部') return articles
    return articles.filter(a => a.category === activeCategory)
  }, [articles, activeCategory])

  return (
    <div className="app">
      <header className="navbar">
        <h1 className="logo">RUNOOB Blog</h1>
        <nav>
          <a href="/">首页</a>
          <a href="#">关于</a>
        </nav>
      </header>

      <main className="container">
        <h2 className="section-title">最新文章</h2>

        {/* 分类筛选按钮组 */}
        <div className="category-bar">
          {categories.map(cat => (
            <button
              key={cat}
              className={activeCategory === cat ? 'active' : ''}
              onClick={() => setActiveCategory(cat)}
            >
              {cat}
            </button>
          ))}
        </div>

        <p className="result-info">共 {filteredArticles.length} 篇</p>

        {filteredArticles.length === 0 ? (
          <p className="empty-tip">该分类下暂无文章</p>
        ) : (
          <div className="article-grid">
            {filteredArticles.map(article => (
              <div key={article.id} className="article-card">
                <div className="card-content">
                  <span className="card-category">{article.category}</span>
                  <h3>{article.title}</h3>
                  <p>{article.summary}</p>
                  <span className="card-date">{article.date}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>

      <footer className="footer">
        <p>© 2024 RUNOOB Blog. Powered by React.</p>
      </footer>
    </div>
  )
}

export default App

/* 文件路径：src/App.css 追加分类筛选按钮样式 */
.category-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.category-bar button {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.category-bar button.active {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
}

.category-bar button:hover {
  border-color: #1976d2;
}

.result-info {
  color: #999;
  font-size: 14px;
  margin-bottom: 16px;
}