// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

// 1. 获取 DOM 根节点（对应 index.html 中的 <div id="root"></div>）
const root = ReactDOM.createRoot(document.getElementById('root'))

// 2. 挂载 React 根组件
root.render(
  // StrictMode：严格模式，检查组件潜在问题（仅开发环境生效）
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// 编写的 JSX 代码
const element = (
  <div className="greeting" onClick={() => console.log('hello')}>
    <h1>Hello, {name}!</h1>
  </div>
);

// 编译后的 JavaScript 代码（React 内部执行）
const element = React.createElement(
  'div',
  { className: 'greeting', onClick: () => console.log('hello') },
  React.createElement('h1', null, `Hello, ${name}!`)
);

// 方式1：箭头函数（推荐，简洁易读）
const Button = (props) => {
  // 解构 props，简化使用
  const { text, onClick } = props;
  return <button onClick={onClick}>{text}</button>;
};

// 方式2：普通函数
function Input({ placeholder, value, onChange }) {
  return <input placeholder={placeholder} value={value} onChange={onChange} />;
}

// 方式3：无 props 简化写法
const HelloWorld = () => {
  return <h1>Hello React!</h1>;
};

import React, { Component } from 'react';

class Counter extends Component {
  // 类组件状态（旧版）
  state = {
    count: 0
  };

  // 事件处理（需绑定 this，或用箭头函数）
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // 必须实现 render 方法
  render() {
    return (
      <div>
        <p>计数：{this.state.count}</p>
        <button onClick={this.increment}>点击加1</button>
      </div>
    );
  }
}

// ./components/Button.jsx
// 默认导出
const Button = ({ text }) => <button>{text}</button>;
export default Button;

// 命名导出
export const PrimaryButton = ({ text }) => (
  <button style={{ backgroundColor: 'blue', color: 'white' }}>{text}</button>
);

// 导入使用（./App.jsx）
import Button from './components/Button';
import { PrimaryButton } from './components/Button';

const App = () => {
  return (
    <div>
      <Button text="普通按钮" />
      <PrimaryButton text="主要按钮" />
    </div>
  );
};

// 子组件：接收并使用 props
const UserCard = ({ name, age, isAdult }) => {
  return (
    <div style={{ padding: '16px', border: '1px solid #eee' }}>
      <h3>姓名：{name}</h3>
      <p>年龄：{age}</p>
      <p>是否成年：{isAdult ? '是' : '否'}</p>
    </div>
  );
};

// 父组件：传递 props 给子组件
const Parent = () => {
  return (
    <div>
      {/* 传递基本类型 props */}
      <UserCard name="张三" age={25} isAdult={true} />
      {/* 传递引用类型 props */}
      <UserCard name="李四" age={17} isAdult={false} />
    </div>
  );
};

// 方式1：函数参数默认值（推荐，简洁）
const Greeting = ({ name = '匿名用户', message = '欢迎使用 React' }) => {
  return <p>{name}：{message}</p>;
};

// 方式2：defaultProps（旧版，兼容类组件）
const Greeting = ({ name, message }) => {
  return <p>{name}：{message}</p>;
};
Greeting.defaultProps = {
  name: '匿名用户',
  message: '欢迎使用 React'
};

// 使用：不传递 props 则使用默认值
<Greeting /> 

import PropTypes from 'prop-types';

const UserCard = ({ name, age, isAdult, hobbies }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>年龄：{age}</p>
      <p>爱好：{hobbies.join(', ')}</p>
    </div>
  );
};

// 定义 props 类型校验
UserCard.propTypes = {
  name: PropTypes.string.isRequired, // 字符串类型，必填
  age: PropTypes.number, // 数字类型
  isAdult: PropTypes.bool, // 布尔类型
  hobbies: PropTypes.arrayOf(PropTypes.string) // 字符串数组类型
};

export default UserCard;

import React, { useState } from 'react';

const Counter = () => {
  // 声明状态：[当前状态, 状态更新函数] = useState(初始值)
  const [count, setCount] = useState(0); // 数字状态
  const [user, setUser] = useState({ name: '张三', age: 20 }); // 对象状态
  const [todos, setTodos] = useState(['学习 React', '掌握 Hooks']); // 数组状态

  // 1. 基本状态更新（不依赖上一次状态）
  const increment = () => {
    setCount(count + 1); // 正确
    // count += 1; // 错误：直接修改状态，不触发渲染
  };

  // 2. 函数式状态更新（依赖上一次状态，推荐异步场景）
  const incrementAsync = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1); // 正确：使用上一次状态
    }, 1000);
  };

  // 3. 对象状态更新（需展开原有对象，保持不可变性）
  const updateUser = () => {
    setUser(prevUser => ({
      ...prevUser, // 展开原有属性
      age: prevUser.age + 1 // 修改需要更新的属性
    }));
  };

  // 4. 数组状态更新（需返回新数组，保持不可变性）
  const addTodo = () => {
    setTodos(prevTodos => [...prevTodos, '学习 React Router']); // 正确：添加元素
    // setTodos(todos.push('学习 React Router')); // 错误：push 修改原数组
  };

  return (
    <div style={{ padding: '16px' }}>
      <p>计数：{count}</p>
      <button onClick={increment}>点击加1</button>
      <button onClick={incrementAsync}>异步加1</button>
      
      <p>用户名：{user.name}，年龄：{user.age}</p>
      <button onClick={updateUser}>增加年龄</button>
      
      <p>待办列表：</p>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>添加待办</button>
    </div>
  );
};

export default Counter;

import React, { useState, useEffect } from 'react';

const EffectDemo = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  // 示例1：依赖 count，count 变化时执行
  useEffect(() => {
    console.log(`count 更新为：${count}`);
    // 清理函数：count 变化前/组件卸载时执行
    return () => {
      console.log(`清理：count 即将更新`);
    };
  }, [count]);

  // 示例2：空依赖，仅挂载时执行（数据请求）
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const result = await res.json();
        setData(result);
      } catch (err) {
        console.error('请求失败：', err);
      }
    };
    fetchData();

    // 清理函数：组件卸载时执行（清除定时器/订阅等）
    return () => {
      console.log('组件卸载，清理副作用');
    };
  }, []);

  // 示例3：无依赖，每次渲染后执行（不推荐，易导致无限循环）
  // useEffect(() => {
  //   console.log('组件每次渲染后执行');
  // });

  return (
    <div>
      <p>count：{count}</p>
      <button onClick={() => setCount(count + 1)}>加1</button>
      {data && (
        <div>
          <h3>请求数据：</h3>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default EffectDemo;

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

const RefDemo = () => {
  const [inputValue, setInputValue] = useState('');
  // 1. 获取 DOM 元素引用
  const inputRef = useRef(null);
  // 2. 保存持久化数据（计时器ID，组件渲染不丢失）
  const timerRef = useRef(null);
  // 3. 保存上一次的 inputValue
  const prevValueRef = useRef('');

  // 挂载后自动聚焦输入框
  useEffect(() => {
    inputRef.current.focus(); // 通过 current 获取 DOM 实例
  }, []);

  // 监听 inputValue 变化，保存上一次值
  useEffect(() => {
    prevValueRef.current = inputValue; // 修改 current 不触发组件渲染
  }, [inputValue]);

  // 启动定时器
  const startTimer = () => {
    timerRef.current = setInterval(() => {
      console.log('定时器运行中...');
    }, 1000);
  };

  // 清除定时器
  const clearTimer = () => {
    clearInterval(timerRef.current);
  };

  return (
    <div style={{ padding: '16px' }}>
      {/* 绑定 ref 到输入框 */}
      <input
        ref={inputRef}
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="自动聚焦输入框"
      />
      <p>当前值：{inputValue}</p>
      <p>上一次值：{prevValueRef.current}</p>
      <button onClick={startTimer}>启动定时器</button>
      <button onClick={clearTimer} style={{ marginLeft: '10px' }}>清除定时器</button>
    </div>
  );
};

export default RefDemo;

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

// 1. 创建 Context（可设置默认值，非必须）
const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} });

// 2. 提供 Context 数据（Provider，通常在根组件/父组件中使用）
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  // 切换主题的方法
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  // 传递给子组件的数据（可传递状态和方法）
  const contextValue = {
    theme,
    toggleTheme
  };

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. 消费 Context 数据（任意子组件，无需逐层传参）
const ThemeButton = () => {
  // 使用 useContext 获取 Context 数据
  const { theme, toggleTheme } = useContext(ThemeContext);

  // 根据主题设置样式
  const buttonStyle = {
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    backgroundColor: theme === 'light' ? '#fff' : '#333',
    color: theme === 'light' ? '#333' : '#fff',
    cursor: 'pointer'
  };

  return (
    <button style={buttonStyle} onClick={toggleTheme}>
      当前主题：{theme}，点击切换
    </button>
  );
};

// 4. 全局使用
const App = () => {
  return (
    <ThemeProvider>
      <div style={{ padding: '16px' }}>
        <ThemeButton />
      </div>
    </ThemeProvider>
  );
};

export default App;

// ./hooks/useFetch.js
import { useState, useEffect } from 'react';

// 自定义 Hook：通用数据请求
const useFetch = (url, options = {}) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 取消请求的控制器
    const controller = new AbortController();
    const signal = controller.signal;

    // 异步请求函数
    const fetchData = async () => {
      try {
        setLoading(true);
        const res = await fetch(url, { ...options, signal });
        if (!res.ok) {
          throw new Error(`请求失败：${res.status} ${res.statusText}`);
        }
        const result = await res.json();
        setData(result);
        setError(null);
      } catch (err) {
        // 排除取消请求的错误
        if (err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        // 排除取消请求的情况，更新 loading 状态
        if (!signal.aborted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // 清理函数：组件卸载/依赖更新时取消请求
    return () => {
      controller.abort();
    };
  }, [url, options]);

  // 返回状态和数据
  return { data, loading, error };
};

export default useFetch;

// 使用 useFetch Hook
import useFetch from './hooks/useFetch';

const FetchDemo = () => {
  // 调用自定义 Hook
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

  if (loading) {
    return <p>加载中...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>错误：{error}</p>;
  }

  return (
    <div>
      <h3>数据请求结果：</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default FetchDemo;

// ./hooks/useTimer.js
import { useState, useEffect, useRef } from 'react';

// 自定义 Hook：定时器
const useTimer = (initialSeconds = 0) => {
  const [seconds, setSeconds] = useState(initialSeconds);
  const timerRef = useRef(null);

  // 启动定时器
  const startTimer = () => {
    if (timerRef.current) return; // 防止重复启动
    timerRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  };

  // 暂停定时器
  const pauseTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
  };

  // 重置定时器
  const resetTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
    setSeconds(initialSeconds);
  };

  // 清理函数：组件卸载时清除定时器
  useEffect(() => {
    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  // 返回状态和方法
  return { seconds, startTimer, pauseTimer, resetTimer };
};

export default useTimer;

// 使用 useTimer Hook
import useTimer from './hooks/useTimer';

const TimerDemo = () => {
  const { seconds, startTimer, pauseTimer, resetTimer } = useTimer(0);

  return (
    <div style={{ padding: '16px' }}>
      <h3>计时器：{seconds} 秒</h3>
      <button onClick={startTimer} style={{ marginRight: '10px' }}>启动</button>
      <button onClick={pauseTimer} style={{ marginRight: '10px' }}>暂停</button>
      <button onClick={resetTimer}>重置</button>
    </div>
  );
};

export default TimerDemo;

// 子组件
const ChildInput = ({ onValueChange }) => {
  const handleInput = (e) => {
    // 调用父组件传递的回调函数，传递输入框值
    onValueChange(e.target.value);
  };

  return (
    <input
      type="text"
      placeholder="输入内容传递给父组件"
      onChange={handleInput}
    />
  );
};

// 父组件
const Parent = () => {
  const [inputValue, setInputValue] = useState('');

  // 定义回调函数，接收子组件传递的数据
  const handleValueChange = (value) => {
    setInputValue(value);
  };

  return (
    <div style={{ padding: '16px' }}>
      <p>父组件接收的值：{inputValue}</p>
      {/* 传递回调函数给子组件 */}
      <ChildInput onValueChange={handleValueChange} />
    </div>
  );
};

// 兄弟组件A：传递数据给父组件
const BrotherA = ({ onSendMsg }) => {
  const handleClick = () => {
    onSendMsg('我是兄弟组件A传递的消息');
  };

  return <button onClick={handleClick}>给兄弟组件B传值</button>;
};

// 兄弟组件B：接收父组件传递的数据
const BrotherB = ({ msg }) => {
  return <p>兄弟组件B接收的消息：{msg}</p>;
};

// 父组件：中转数据
const Parent = () => {
  const [msg, setMsg] = useState('');

  const handleMsgChange = (data) => {
    setMsg(data);
  };

  return (
    <div style={{ padding: '16px' }}>
      <BrotherA onSendMsg={handleMsgChange} />
      <BrotherB msg={msg} />
    </div>
  );
};

// ./utils/eventBus.js
import mitt from 'mitt';

// 创建事件总线实例
const eventBus = mitt();

export default eventBus;

// 组件A：发送事件
import eventBus from './utils/eventBus';

const ComponentA = () => {
  const handleSend = () => {
    // 发送事件，传递数据
    eventBus.emit('customEvent', '组件A发送的消息');
  };

  return <button onClick={handleSend}>发送事件</button>;
};

// 组件B：接收事件
import { useEffect } from 'react';
import eventBus from './utils/eventBus';

const ComponentB = () => {
  useEffect(() => {
    // 监听事件
    const handler = (data) => {
      console.log('组件B接收的事件数据：', data);
    };
    eventBus.on('customEvent', handler);

    // 清理函数：组件卸载时移除监听
    return () => {
      eventBus.off('customEvent', handler);
    };
  }, []);

  return <p>组件B：监听事件</p>;
};

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // 导入 BrowserRouter
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 用 BrowserRouter 包裹根组件，提供路由上下文 */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// src/App.jsx
import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

const App = () => {
  return (
    <div style={{ padding: '16px' }}>
      {/* 导航链接（Link 替代 a 标签，无页面刷新） */}
      <nav style={{ marginBottom: '20px' }}>
        <Link to="/" style={{ marginRight: '20px' }}>首页</Link>
        <Link to="/about">关于我们</Link>
      </nav>

      {/* 路由配置 */}
      <Routes>
        {/* 首页路由（默认路由） */}
        <Route path="/" element={<Home />} />
        {/* 关于我们路由 */}
        <Route path="/about" element={<About />} />
        {/* 404 路由（匹配所有未定义路由，需放在最后） */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};

export default App;

// src/pages/Home.jsx
const Home = () => {
  return <h2>首页：欢迎学习 React Router v6</h2>;
};

export default Home;

// src/pages/About.jsx
const About = () => {
  return <h2>关于我们：React 路由实战</h2>;
};

export default About;

// src/pages/NotFound.jsx
const NotFound = () => {
  return <h2 style={{ color: 'red' }}>404：页面不存在</h2>;
};

export default NotFound;

import { useNavigate } from 'react-router-dom';

const Home = () => {
  // 获取 navigate 函数
  const navigate = useNavigate();

  // 跳转到关于我们页面
  const goToAbout = () => {
    navigate('/about'); // 普通跳转
    // navigate('/about', { replace: true }); // 替换历史记录（无法返回上一页）
    // navigate(-1); // 返回上一页
  };

  return (
    <div>
      <h2>首页：欢迎学习 React Router v6</h2>
      <button onClick={goToAbout} style={{ marginTop: '10px' }}>
        跳转到关于我们
      </button>
    </div>
  );
};

export default Home;

// src/App.jsx
import { Routes, Route, Link } from 'react-router-dom';
import User from './pages/User';

// 导航链接
<Link to="/user/1001">用户1001</Link>

// 路由配置（:id 为动态参数）
<Routes>
  <Route path="/user/:id" element={<User />} />
</Routes>

// src/pages/User.jsx
import { useParams } from 'react-router-dom';

const User = () => {
  // 获取动态路由参数
  const { id } = useParams();

  return <h2>用户页面：用户ID为 {id}</h2>;
};

export default User;

// 导航链接：带查询参数
<Link to="/user/1001?name=张三&age=25">用户1001（带查询参数）</Link>

// src/pages/User.jsx
import { useParams, useSearchParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  // 获取查询参数（类似 useState，返回 [查询参数对象, 设置查询参数函数]）
  const [searchParams, setSearchParams] = useSearchParams();

  // 获取单个查询参数
  const name = searchParams.get('name');
  const age = searchParams.get('age');

  // 修改查询参数
  const updateSearchParams = () => {
    setSearchParams({ name: '李四', age: 26 });
  };

  return (
    <div>
      <h2>用户页面：用户ID为 {id}</h2>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <button onClick={updateSearchParams} style={{ marginTop: '10px' }}>
        修改查询参数
      </button>
    </div>
  );
};

export default User;

// src/App.jsx
import { Routes, Route, Link } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

const App = () => {
  return (
    <div style={{ padding: '16px' }}>
      <nav style={{ marginBottom: '20px' }}>
        <Link to="/" style={{ marginRight: '20px' }}>首页</Link>
        <Link to="/about" style={{ marginRight: '20px' }}>关于我们</Link>
        <Link to="/dashboard">控制台</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 父路由：控制台 */}
        <Route path="/dashboard" element={<Dashboard />}>
          {/* 子路由：默认子路由（index 为 true） */}
          <Route index element={<p>请选择控制台子菜单</p>} />
          {/* 子路由：用户管理 */}
          <Route path="user" element={<p>用户管理页面</p>} />
          {/* 子路由：订单管理 */}
          <Route path="order" element={<p>订单管理页面</p>} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};

export default App;

// src/pages/Dashboard.jsx
import { Link, Outlet } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>控制台</h2>
      {/* 子导航 */}
      <nav style={{ margin: '10px 0', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
        <Link to="user" style={{ marginRight: '20px' }}>用户管理</Link>
        <Link to="order">订单管理</Link>
      </nav>
      {/* 子路由占位符：子路由组件将渲染在这里 */}
      <Outlet />
    </div>
  );
};

export default Dashboard;

// src/components/PrivateRoute.jsx
import { Navigate, Outlet } from 'react-router-dom';

// 私有路由组件
const PrivateRoute = () => {
  // 模拟用户登录状态（实际项目中从本地存储/全局状态获取）
  const isLogin = localStorage.getItem('isLogin') === 'true';

  // 已登录：渲染子路由（Outlet）；未登录：跳转到登录页
  return isLogin ? <Outlet /> : <Navigate to="/login" replace />;
};

export default PrivateRoute;

// src/App.jsx
import { Routes, Route } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';

// 路由配置
<Routes>
  {/* 私有路由：需要登录才能访问 */}
  <Route element={<PrivateRoute />}>
    <Route path="/dashboard" element={<Dashboard />}>
      <Route index element={<p>请选择控制台子菜单</p>} />
      <Route path="user" element={<p>用户管理页面</p>} />
      <Route path="order" element={<p>订单管理页面</p>} />
    </Route>
  </Route>
  {/* 登录页 */}
  <Route path="/login" element={<Login />} />
</Routes>

// src/pages/Login.jsx
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  // 模拟登录
  const handleLogin = () => {
    localStorage.setItem('isLogin', 'true');
    navigate('/dashboard'); // 登录成功后跳转到控制台
  };

  return (
    <div style={{ padding: '16px' }}>
      <h2>登录页</h2>
      <button onClick={handleLogin}>模拟登录</button>
    </div>
  );
};

export default Login;

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterSlice from './slices/counterSlice';
import userSlice from './slices/userSlice';

// 创建 Store
export const store = configureStore({
  reducer: {
    // 注册切片：counter 和 user
    counter: counterSlice.reducer,
    user: userSlice.reducer
  }
});

export default store;

// src/store/slices/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

// 创建切片
const counterSlice = createSlice({
  name: 'counter', // 切片名称（用于 Action 类型前缀）
  initialState: { // 初始状态
    value: 0
  },
  reducers: { //  reducer 函数（修改状态）
    increment: (state) => {
      // RTK 内置 Immer 库，可直接修改状态（无需返回新状态）
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      // action.payload 为传递的参数
      state.value += action.payload;
    }
  }
});

// 导出 Action 创建函数
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice;

// src/store/slices/userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: '张三',
    age: 20,
    isLogin: false
  },
  reducers: {
    login: (state) => {
      state.isLogin = true;
    },
    logout: (state) => {
      state.isLogin = false;
    },
    updateUserInfo: (state, action) => {
      // 更新用户信息
      state.name = action.payload.name;
      state.age = action.payload.age;
    }
  }
});

export const { login, logout, updateUserInfo } = userSlice.actions;

export default userSlice;

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'; // 导入 Provider
import store from './store'; // 导入 Store
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 用 Provider 包裹根组件，注入 Store */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './store/slices/counterSlice';
import { login, logout, updateUserInfo } from './store/slices/userSlice';

const ReduxDemo = () => {
  // 1. 获取 Store 中的状态（useSelector）
  const counterValue = useSelector((state) => state.counter.value);
  const userInfo = useSelector((state) => state.user);

  // 2. 获取 Dispatch 函数（useDispatch）
  const dispatch = useDispatch();

  return (
    <div style={{ padding: '16px' }}>
      <h2>Redux Toolkit 示例</h2>
      <h3>计数器：{counterValue}</h3>
      <button onClick={() => dispatch(increment())} style={{ marginRight: '10px' }}>
        加1
      </button>
      <button onClick={() => dispatch(decrement())} style={{ marginRight: '10px' }}>
        减1
      </button>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        加5
      </button>

      <div style={{ marginTop: '20px' }}>
        <h3>用户信息：</h3>
        <p>姓名：{userInfo.name}</p>
        <p>年龄：{userInfo.age}</p>
        <p>登录状态：{userInfo.isLogin ? '已登录' : '未登录'}</p>
        <button onClick={() => dispatch(login())} style={{ marginRight: '10px' }}>
          登录
        </button>
        <button onClick={() => dispatch(logout())} style={{ marginRight: '10px' }}>
          登出
        </button>
        <button onClick={() => dispatch(updateUserInfo({ name: '李四', age: 25 }))}>
          更新用户信息
        </button>
      </div>
    </div>
  );
};

export default ReduxDemo;

// src/store/useStore.js
import { create } from 'zustand';

// 创建 Store
const useStore = create((set) => ({
  // 状态
  counter: 0,
  user: {
    name: '张三',
    age: 20
  },
  // 修改状态的方法（set 用于更新状态）
  increment: () => set((state) => ({ counter: state.counter + 1 })),
  decrement: () => set((state) => ({ counter: state.counter - 1 })),
  incrementByAmount: (amount) => set((state) => ({ counter: state.counter + amount })),
  updateUser: (userInfo) => set((state) => ({ user: { ...state.user, ...userInfo } }))
}));

export default useStore;

// 在组件中使用
import useStore from './store/useStore';

const ZustandDemo = () => {
  // 1. 获取单个状态（组件仅在该状态变化时重新渲染）
  const counter = useStore((state) => state.counter);
  const user = useStore((state) => state.user);

  // 2. 获取修改状态的方法
  const increment = useStore((state) => state.increment);
  const decrement = useStore((state) => state.decrement);
  const incrementByAmount = useStore((state) => state.incrementByAmount);
  const updateUser = useStore((state) => state.updateUser);

  return (
    <div style={{ padding: '16px' }}>
      <h2>Zustand 示例</h2>
      <h3>计数器：{counter}</h3>
      <button onClick={increment} style={{ marginRight: '10px' }}>加1</button>
      <button onClick={decrement} style={{ marginRight: '10px' }}>减1</button>
      <button onClick={() => incrementByAmount(5)}>加5</button>

      <div style={{ marginTop: '20px' }}>
        <h3>用户信息：</h3>
        <p>姓名：{user.name}</p>
        <p>年龄：{user.age}</p>
        <button onClick={() => updateUser({ name: '李四', age: 25 })}>
          更新用户信息
        </button>
      </div>
    </div>
  );
};

export default ZustandDemo;

// 在组件中使用
const App = () => {
  return <div className="container">全局样式示例</div>;
};

// src/components/Button.jsx
import styles from './Button.module.css'; // 导入 CSS 模块

const Button = ({ type = 'primary', children, onClick }) => {
  return (
    <button
      // 拼接类名
      className={`${styles.button} ${styles[type]}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

// src/components/Card.jsx
import styles from './Card.module.scss';

const Card = ({ title, children }) => {
  return (
    <div className={styles.card}>
      <div className={styles.title}>{title}</div>
      <div className={styles.content}>{children}</div>
    </div>
  );
};

export default Card;

import styled from 'styled-components';

// 创建 styled 组件
const StyledButton = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: ${props => props.primary ? '#1890ff' : '#f5f5f5'};
  color: ${props => props.primary ? '#fff' : '#333'};
  &:hover {
    opacity: 0.9;
  }
`;

// 创建嵌套组件
const Card = styled.div`
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;

  .title {
    font-size: 18px;
    color: #1890ff;
    margin-bottom: 10px;
  }
`;

// 在组件中使用
const StyledDemo = () => {
  return (
    <div style={{ padding: '16px' }}>
      <StyledButton primary>主要按钮</StyledButton>
      <StyledButton style={{ marginLeft: '10px' }}>次要按钮</StyledButton>
      <Card style={{ marginTop: '20px' }}>
        <div className="title">Card 标题</div>
        <div>Card 内容</div>
      </Card>
    </div>
  );
};

export default StyledDemo;

const TailwindDemo = () => {
  return (
    <div className="container mx-auto p-4">
      <h2 className="text-2xl font-bold text-blue-600 mb-4">Tailwind CSS 示例</h2>
      <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 mr-2">
        主要按钮
      </button>
      <button className="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300">
        次要按钮
      </button>
      <div className="mt-4 p-4 border border-gray-200 rounded">
        <div className="text-lg font-semibold text-blue-600 mb-2">Card 标题</div>
        <div className="text-gray-700">Card 内容</div>
      </div>
    </div>
  );
};

export default TailwindDemo;

import React, { memo, useState } from 'react';

// 使用 React.memo 包裹组件，缓存渲染结果
const Child = memo(({ name }) => {
  console.log('Child 组件重渲染了');
  return <p>子组件：{name}</p>;
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('张三');

  return (
    <div>
      <p>父组件：{count}</p>
      <button onClick={() => setCount(count + 1)}>加1</button>
      {/* 当 count 变化时，name 未变化，Child 组件不会重渲染 */}
      <Child name={name} />
    </div>
  );
};

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

const ExpensiveCalculation = ({ list }) => {
  // 昂贵的计算：过滤并排序数组（仅当 list 变化时重新计算）
  const sortedList = useMemo(() => {
    console.log('执行昂贵计算');
    return list.filter(item => item > 10).sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <p>排序后的列表：{sortedList.join(', ')}</p>
    </div>
  );
};

const Parent = () => {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([20, 5, 15, 30, 8]);

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加1</button>
      {/* count 变化时，sortedList 不会重新计算 */}
      <ExpensiveCalculation list={list} />
    </div>
  );
};