// 虚拟 DOM 的简单示例
const virtualDOM = {
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: ['Hello World'] }
  ]
};

// key 帮助 React 识别列表中的每个元素
{list.map(item => (
  <li key={item.id}>{item.name}</li>
))}

# 创建项目
npx create-react-app my-app

# 使用 TypeScript 模板
npx create-react-app my-app --template typescript

# 进入项目并启动
cd my-app
npm start   # 启动开发服务器，http://localhost:3000

my-app/
├── node_modules/      # 依赖包
├── public/
│   ├── index.html     # 入口 HTML 模板
│   └── favicon.ico
├── src/
│   ├── App.js         # 根组件
│   ├── App.css
│   ├── index.js       # 入口 JS 文件
│   ├── index.css
│   └── reportWebVitals.js
├── package.json       # 项目配置与依赖
└── README.md

import React from 'react';

function App() {
  const name = 'React';
  const style = { color: 'blue', fontSize: '20px' };

  return (
    <div className="app">
      <h1 style={style}>Hello, {name}!</h1>
      {2 + 2}  {/* 表达式求值 */}
      <input type="text" />  {/* 自闭合 */}
    </div>
  );
}

import React, { FC } from 'react';

interface AppProps {
  title: string;
  count?: number;  // 可选属性
}

const App: FC<AppProps> = ({ title, count = 0 }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

// 基础函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 箭头函数写法
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;

function Button() {
  const handleClick = (event) => {
    console.log('按钮被点击', event.target);
  };

  const handleChange = (e) => {
    console.log('输入值:', e.target.value);
  };

  return (
    <div>
      <button onClick={handleClick}>点击我</button>
      <input onChange={handleChange} placeholder="输入内容" />
    </div>
  );
}

import { useState } from 'react';

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

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(prev => prev - 1)}>-1</button>
    </div>
  );
}

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // componentDidMount + componentDidUpdate（userId 变化时）
    fetchUser(userId).then(data => setUser(data));

    // componentWillUnmount（清理函数）
    return () => {
      console.log('组件卸载或 userId 变化前清理');
    };
  }, [userId]);  // 依赖数组：仅 userId 变化时重新执行

  return <div>{user?.name}</div>;
}

import React, { Component } from 'react';

class Welcome extends Component {
  // 类组件必须实现 render 方法
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
    // 方式一：在构造函数中绑定 this
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ isOn: !this.state.isOn });
  }

  // 方式二：箭头函数（自动绑定 this）
  handleClickArrow = () => {
    this.setState(prev => ({ isOn: !prev.isOn }));
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    // 函数式更新：获取最新状态
    this.setState(prev => ({ count: prev.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>+1</button>
      </div>
    );
  }
}

class LifecycleDemo extends Component {
  componentDidMount() {
    console.log('组件已挂载');
    this.timer = setInterval(() => console.log('tick'), 1000);
  }

  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      console.log('id 变化，重新请求数据');
    }
  }

  componentWillUnmount() {
    console.log('组件即将卸载');
    clearInterval(this.timer);
  }

  render() {
    return <div>Lifecycle Demo</div>;
  }
}

// 父组件
function Parent() {
  const user = { name: 'Alice', age: 25 };
  return <Child name={user.name} age={user.age} />;
}

// 子组件
function Child({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

// 带默认值的 Props
Child.defaultProps = {
  age: 18
};

import PropTypes from 'prop-types';

function User({ name, age, hobbies }) {
  return /* ... */;
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  hobbies: PropTypes.arrayOf(PropTypes.string)
};

// 类组件
class MyComponent extends Component {
  state = { count: 0 };
  increment = () => this.setState(prev => ({ count: prev.count + 1 }));
}

// 函数组件
function MyComponent() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prev => prev + 1);
}

// 错误用法（可能得到过期值）
this.setState({ count: this.state.count + 1 });
// 正确用法（函数形式获取最新 state）
this.setState(prev => ({ count: prev.count + 1 }));
setCount(prev => prev + 1);

import { useRef, useEffect } from 'react';

function TextInput() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current?.focus()}>
        聚焦输入框
      </button>
    </div>
  );
}

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();  // 阻止默认提交
    console.log('表单提交');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={(e) => console.log(e.target.value)} />
      <button type="submit">提交</button>
    </form>
  );
}

// 父组件
function Parent() {
  const [message, setMessage] = useState('');

  const handleChildData = (data) => {
    setMessage(data);
  };

  return (
    <div>
      <Child onSend={handleChildData} />
      <p>来自子组件: {message}</p>
    </div>
  );
}

// 子组件
function Child({ onSend }) {
  return (
    <button onClick={() => onSend('Hello from Child')}>
      发送消息给父组件
    </button>
  );
}

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

// 1. 创建 Context
const ThemeContext = createContext('light');

// 2. Provider 提供数据
function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. 中间组件无需传递 props
function Toolbar() {
  return <ThemedButton />;
}

// 4. useContext 消费数据
function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      style={{ background: theme === 'dark' ? '#333' : '#fff' }}
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      当前主题: {theme}
    </button>
  );
}

import { BrowserRouter, Routes, Route, Link,
  useParams, useNavigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/user/123">用户123</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserPage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

// 获取路由参数
function UserPage() {
  const { id } = useParams();
  return <p>用户 ID: {id}</p>;
}

// 编程式导航
function Home() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate('/about')}>
        跳转到关于页
      </button>
    </div>
  );
}

const [state, setState] = useState(initialValue);

// 基本使用
const [name, setName] = useState('');

// 函数式更新（依赖前一个状态时推荐）
const [count, setCount] = useState(0);
setCount(prev => prev + 1);

// 惰性初始化
const [data, setData] = useState(() => expensiveComputation());

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理函数（可选）
  };
}, [依赖数组]);

// 数据请求（仅在挂载时执行）
useEffect(() => {
  fetch('/api/user').then(res => res.json()).then(setUser);
}, []); // 空数组

// 订阅与清理
useEffect(() => {
  const subscription = api.subscribe(id);
  return () => subscription.unsubscribe();
}, [id]);

const memoizedCallback = useCallback(
  () => doSomething(a, b),
  [a, b],
);

// 典型场景：配合 React.memo 避免子组件重渲染
function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // 永远不变的函数引用

  return <Child onClick={handleClick} />;
}

const Child = React.memo(({ onClick }) => {
  console.log('Child 渲染');
  return <button onClick={onClick}>Click</button>;
});

const memoizedValue = useMemo(
  () => expensiveComputation(deps),
  [deps]
);

// 示例：过滤列表
const [users, setUsers] = useState([]);
const [query, setQuery] = useState('');

const filteredUsers = useMemo(
  () => users.filter(u => u.name.includes(query)),
  [users, query]
);

// 访问 DOM
function TextInput() {
  const inputRef = useRef(null);
  useEffect(() => inputRef.current?.focus(), []);
  return <input ref={inputRef} />;
}

// 保存可变值（不触发重渲染）
function Timer() {
  const intervalRef = useRef(null);
  const [count, setCount] = useState(0);

  const start = () => {
    intervalRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
  };

  const stop = () => clearInterval(intervalRef.current);
  return /* ... */;
}

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

const [state, dispatch] = useReducer(reducer, initialState);

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: action.payload };
    default:
      throw new Error('Unknown action type');
  }
}

// 使用
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
dispatch({ type: 'increment' });
dispatch({ type: 'reset', payload: 10 });

import { createStore } from 'redux';

// 1. Action Types
const INCREMENT = 'INCREMENT';

// 2. Action Creator
const increment = () => ({ type: INCREMENT });

// 3. Reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    default:
      return state;
  }
};

// 4. Store
const store = createStore(counterReducer);
store.subscribe(() => console.log(store.getState()));
store.dispatch(increment());

import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>
        +1
      </button>
    </div>
  );
}

// 根组件
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

import { RecoilRoot, atom, selector,
  useRecoilState, useRecoilValue } from 'recoil';

// 1. 定义 Atom
const textState = atom({
  key: 'textState',  // 全局唯一 key
  default: '',
});

// 2. 定义 Selector（派生状态）
const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

// 3. 使用
function TextInput() {
  const [text, setText] = useRecoilState(textState);
  return (
    <input value={text}
      onChange={(e) => setText(e.target.value)} />
  );
}

function CharCount() {
  const count = useRecoilValue(charCountState);
  return <p>字符数: {count}</p>;
}

function App() {
  return (
    <RecoilRoot>
      <TextInput />
      <CharCount />
    </RecoilRoot>
  );
}

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

// ========== 类型定义 ==========
// 在实际项目中这些可以用 TypeScript interface 定义
// interface Todo {
//   id: number;
//   title: string;
//   completed: boolean;
//   createdAt: Date;
// }

// ========== TodoList 组件 ==========
function TodoList() {
  // ---------- 状态管理 ----------
  const [todos, setTodos] = useState([]);           // 任务列表
  const [inputValue, setInputValue] = useState('');  // 输入框值
  const [filter, setFilter] = useState('all');       // 筛选条件: all | completed | active

  // ---------- 添加任务 ----------
  const addTodo = useCallback(() => {
    // 去除首尾空格，空内容不添加
    const trimmed = inputValue.trim();
    if (!trimmed) return;

    // 创建新任务对象
    const newTodo = {
      id: Date.now(),                    // 使用时间戳作为唯一 ID
      title: trimmed,
      completed: false,
      createdAt: new Date().toLocaleString(),
    };

    // 函数式更新：基于前一个状态追加
    setTodos(prev => [newTodo, ...prev]); // 新任务添加到列表顶部
    setInputValue('');                   // 清空输入框
  }, [inputValue]);

  // ---------- 切换完成状态 ----------
  const toggleTodo = useCallback((id) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }  // 翻转完成状态
          : todo
      )
    );
  }, []);

  // ---------- 删除任务 ----------
  const deleteTodo = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  // ---------- 键盘事件（回车添加） ----------
  const handleKeyDown = useCallback((e) => {
    if (e.key === 'Enter') {
      addTodo();
    }
  }, [addTodo]);

  // ---------- 派生数据：筛选后的任务列表 ----------
  const filteredTodos = useMemo(() => {
    switch (filter) {
      case 'completed':
        return todos.filter(t => t.completed);
      case 'active':
        return todos.filter(t => !t.completed);
      default:
        return todos;
    }
  }, [todos, filter]);

  // ---------- 派生数据：统计数据 ----------
  const stats = useMemo(() => ({
    total: todos.length,
    completed: todos.filter(t => t.completed).length,
    active: todos.filter(t => !t.completed).length,
  }), [todos]);

  // ========== 渲染 ==========
  return (
    <div className="todo-container">
      <h2>📋 任务管理</h2>

      {/* ---- 输入区域 ---- */}
      <div className="todo-input-area">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="输入任务，按回车添加..."
        />
        <button onClick={addTodo}>添加</button>
      </div>

      {/* ---- 筛选按钮 ---- */}
      <div className="todo-filters">
        {['all', 'active', 'completed'].map(type => (
          <button
            key={type}
            className={filter === type ? 'active' : ''}
            onClick={() => setFilter(type)}
          >
            {type === 'all' ? `全部(${stats.total})` :
             type === 'active' ? `未完成(${stats.active})` :
             `已完成(${stats.completed})`}
          </button>
        ))}
      </div>

      {/* ---- 任务列表 ---- */}
      {filteredTodos.length === 0 ? (
        /* 空状态 */
        <p className="empty-state">
          {todos.length === 0
            ? '✨ 还没有任务，添加一个吧！'
            : '没有匹配的任务'}
        </p>
      ) : (
        <ul className="todo-list">
          {filteredTodos.map(todo => (
            <li
              key={todo.id}
              className={`todo-item ${todo.completed ? 'completed' : ''}`}
            >
              {/* 复选框 */}
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
              />

              {/* 任务内容（点击也可切换） */}
              <span
                className="todo-title"
                onClick={() => toggleTodo(todo.id)}
              >
                {todo.title}
              </span>

              {/* 创建时间 */}
              <span className="todo-time">{todo.createdAt}</span>

              {/* 删除按钮 */}
              <button
                className="delete-btn"
                onClick={() => deleteTodo(todo.id)}
              >
                删除
              </button>
            </li>
          ))}
        </ul>
      )}

      {/* ---- 底部统计 ---- */}
      <div className="todo-footer">
        总计 {stats.total} 项 | 已完成 {stats.completed} | 未完成 {stats.active}
      </div>
    </div>
  );
}

export default TodoList;