// 原生 JS 创建一个带文字和样式的按钮——你得一步一步"指挥"浏览器
const btn = document.createElement("button"); // 第1步：造一个按钮
btn.className = "my-btn"; // 第2步：给它加个类名
btn.textContent = "点击我"; // 第3步：设置按钮上的文字
btn.addEventListener("click", () => {
  // 第4步：绑定点击事件
  alert("你好！");
});
const container = document.getElementById("app"); // 第5步：找到要挂载的位置
container.appendChild(btn); // 第6步：把按钮放进去

// JSX 写法——像写 HTML 一样描述界面，React 帮你搞定 DOM 操作
function App() {
  return (
    <button className="my-btn" onClick={() => alert("你好！")}>
      点击我
    </button>
  );
}

// ❌ 错误写法：两个元素并列，JSX 不知道谁才是"老大"
function App() {
  return (
    <h1>标题</h1>
    <p>段落内容</p>
  );
}
// 浏览器报错：Adjacent JSX elements must be wrapped in an enclosing tag.

// ✅ 正确写法一：用 <div> 包裹
function App() {
  return (
    <div>
      <h1>标题</h1>
      <p>段落内容</p>
    </div>
  );
}

// ✅ 正确写法二：用 Fragment 空标签 <>...</> 包裹（推荐！）
// Fragment 就像一个"隐形盒子"——它把子元素装在一起，但不会在页面上多渲染一层 DOM
function App() {
  return (
    <>
      <h1>标题</h1>
      <p>段落内容</p>
    </>
  );
}

// ❌ 错误写法：HTML 中的自闭合标签在 JSX 中不闭合会报错
function App() {
  return (
    <div>
      <img src="logo.png">           {/* 缺少 /> */}
      <br>                           {/* 缺少 /> */}
      <input type="text">           {/* 缺少 /> */}
    </div>
  );
}

// ✅ 正确写法：自闭合标签必须以 /> 结尾
function App() {
  return (
    <div>
      <img src="logo.png" alt="网站Logo" /> {/* 必须闭合 */}
      <br /> {/* 必须闭合 */}
      <input type="text" /> {/* 必须闭合 */}
    </div>
  );
}

// ❌ 错误写法
function App() {
  return <div class="container">内容</div>;
}
// 浏览器控制台警告：Invalid DOM property `class`. Did you mean `className`?

// ✅ 正确写法
function App() {
  return <div className="container">内容</div>;
}

// ❌ 错误写法
function App() {
  return (
    <div>
      <label for="username">用户名：</label>
      <input id="username" type="text" />
    </div>
  );
}

// ✅ 正确写法
function App() {
  return (
    <div>
      <label htmlFor="username">用户名：</label>
      <input id="username" type="text" />
    </div>
  );
}

// ❌ 错误写法
function App() {
  return <div style="color: red; font-size: 20px;">红色大字</div>;
}

// ❌ 还是错误：属性名不是驼峰
function App() {
  return <div style={{ color: "red", "font-size": "20px" }}>红色大字</div>;
}

// ✅ 正确写法：外层的 {} 是 JSX 表达式语法，内层的 {} 是 JS 对象字面量
function App() {
  return <div style={{ color: "red", fontSize: "20px" }}>红色大字</div>;
}

// ❌ 错误写法：HTML 风格的事件名
function App() {
  return <button onclick="handleClick()">点击</button>;
}

// ✅ 正确写法：驼峰命名 + {} 包裹
function App() {
  const handleClick = () => {
    alert("按钮被点击了！");
  };
  return <button onClick={handleClick}>点击</button>;
}

function Greeting() {
  const name = "小明"; // 定义一个变量
  const age = 18; // 定义另一个变量

  return (
    <div>
      {/* 用 {} 把变量插入到 HTML 结构中 */}
      <h1>你好，我叫 {name}</h1>
      <p>我今年 {age} 岁</p>
      {/* 花括号里可以做运算 */}
      <p>明年我就 {age + 1} 岁了</p>
    </div>
  );
}
// 页面渲染结果：
// 你好，我叫 小明
// 我今年 18 岁
// 明年我就 19 岁了

function App() {
  // 定义一个格式化函数
  const formatPrice = (price) => {
    return "¥" + price.toFixed(2); // 保留两位小数，前面加 ¥
  };

  const productName = "机械键盘";
  const price = 299.9;

  return (
    <div>
      <h2>{productName}</h2>
      {/* {} 里可以直接调用函数，用它的返回值 */}
      <p>价格：{formatPrice(price)}</p>
      {/* 也可以调用 JS 内置方法 */}
      <p>{productName.toUpperCase()}</p> {/* 渲染：机械键盘 → 变成全大写 */}
    </div>
  );
}
// 页面渲染结果：
// 机械键盘
// 价格：¥299.90
// 机械键盘（这个会是全大写的效果：“Jī Xiè Jiàn Pán”？不对，toUpperCase 对中文无效，我们留下这个作为教学注意点）

function UserStatus() {
  const isLoggedIn = true; // 模拟登录状态

  return (
    <div>
      {/* 三元表达式：条件 ? 为真时显示 : 为假时显示 */}
      <p>当前状态：{isLoggedIn ? "已登录" : "未登录"}</p>
      {/* 三元表达式可以嵌套，但不推荐太深 */}
      <p>{isLoggedIn ? "欢迎回来！" : "请先登录"}</p>
    </div>
  );
}
// 渲染结果：
// 当前状态：已登录
// 欢迎回来！

function FruitList() {
  const fruits = ["苹果", "香蕉", "橘子", "葡萄"];

  return (
    <div>
      <h2>水果清单</h2>
      <ul>
        {/* map() 遍历数组，返回一个新的 JSX 元素数组 */}
        {/* 注意：这里 map 返回的是一个数组，JSX 可以直接渲染数组 */}
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}
// 渲染结果：
// 水果清单
// · 苹果
// · 香蕉
// · 橘子
// · 葡萄

// ❌ 错误1：在 {} 中写 if 语句
function Wrong1() {
  const isAdmin = true;
  return (
    <div>
      {if (isAdmin) { <p>管理员面板</p> }}   {/* 语法错误！if 是语句不是表达式 */}
    </div>
  );
}

// ❌ 错误2：在 {} 中写 for 循环
function Wrong2() {
  return (
    <ul>
      {for (let i = 0; i < 5; i++) { <li>{i}</li> }}  {/* 语法错误！ */}
    </ul>
  );
}

// ❌ 错误3：在 {} 中写变量声明
function Wrong3() {
  return (
    <div>
      {const name = '小明'}   {/* 语法错误！const 声明是语句 */}
    </div>
  );
}

// ✅ 正确做法：把这些逻辑移到 return 之前
function Correct() {
  // 在 return 之前处理逻辑
  const isAdmin = true;
  let adminPanel = null;
  if (isAdmin) {
    adminPanel = <p>管理员面板</p>;
  }

  return (
    <div>
      {adminPanel}              {/* 这里只放表达式 */}
    </div>
  );
}

function WelcomeMessage({ user }) {
  // 在 return 之前用 if-else 决定渲染内容
  if (!user) {
    // 没有用户数据：显示加载中
    return (
      <div className="loading">
        <p>加载中，请稍候...</p>
      </div>
    );
  }

  if (user.role === "admin") {
    // 管理员：显示特权界面
    return (
      <div className="admin-panel">
        <h2>欢迎回来，管理员 {user.name}</h2>
        <button>进入后台</button>
      </div>
    );
  }

  // 普通用户：显示常规界面
  return (
    <div className="user-panel">
      <h2>你好，{user.name}</h2>
      <button>查看个人信息</button>
    </div>
  );
}

function NotificationBell({ unreadCount }) {
  return (
    <div className="notification">
      {/* 铃铛图标 */}
      <span>🔔</span>

      {/* && 短路逻辑：只有当 unreadCount > 0 时，红点才渲染 */}
      {unreadCount > 0 && <span className="badge">{unreadCount}</span>}

      {/* 如果没有未读消息，红点完全不存在于 DOM 中 */}
    </div>
  );
}
// unreadCount = 3 → 渲染：🔔 3
// unreadCount = 0 → 渲染：🔔（没有红点）

function ToggleSwitch({ isOn }) {
  return (
    <div>
      {/* 三元运算：在 JSX 内部直接二选一 */}
      <button className={isOn ? "btn-on" : "btn-off"}>
        {isOn ? "开启" : "关闭"}
      </button>
    </div>
  );
}

function TodoList() {
  // 待办事项数据
  const todos = [
    { id: 1, text: "学习 React", completed: false },
    { id: 2, text: "写作业", completed: true },
    { id: 3, text: "运动30分钟", completed: false },
  ];

  return (
    <ul>
      {/* map 遍历数组，为每个元素生成对应的 JSX */}
      {todos.map((todo) => (
        // ⚠️ key 属性必须加在 map 返回的最外层元素上
        <li
          key={todo.id} // 用每条数据的唯一 id 作为 key
          style={{
            textDecoration: todo.completed ? "line-through" : "none",
          }}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}
// 渲染结果：
// · 学习 React
// · 写作业（带删除线）
// · 运动30分钟

// ✅ 最佳实践：使用数据中自带的唯一 ID
todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

// ✅ 次优方案：使用有业务含义的唯一值（如用户名、邮箱等）
users.map((user) => <li key={user.email}>{user.name}</li>);

// ❌ 万不得已才用的方案：使用 index
todos.map((todo, index) => <li key={index}>{todo.text}</li>);

function App() {
  return (
    <div>
      <ul>
        <li key="a">苹果</li> {/* 这里的 key="a" */}
        <li key="b">香蕉</li> {/* 只在和 "苹果" 比较时需要唯一 */}
      </ul>
      <ul>
        <li key="a">红色</li> {/* 这里的 key="a" 和上面的不冲突 */}
        <li key="b">黄色</li> {/* 因为它们在另一个<ul>范围内 */}
      </ul>
    </div>
  );
}

// 模拟一个场景：列表项可以增删改排序
function BadExample() {
  const [items, setItems] = useState([
    { id: "a", text: "第一项" },
    { id: "b", text: "第二项" },
  ]);

  // ❌ 用 index 做 key
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <input defaultValue={item.text} /> {/* 带输入框的列表项 */}
          {item.text}
        </li>
      ))}
    </ul>
  );
}

// 当你删除第一项后：
// 原来 index=0 的 "第一项" 消失了
// 原来 index=1 的 "第二项" 变成了 index=0
// React 看到 key=0 还在，以为还是原来的组件，不会重新渲染输入框
// 结果：输入框里的内容会发生错乱！

// ✅ 用唯一 ID 做 key 就没有这个问题
function GoodExample() {
  const [items, setItems] = useState([
    { id: "a", text: "第一项" },
    { id: "b", text: "第二项" },
  ]);

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {" "}
          {/* 用稳定的唯一 ID */}
          <input defaultValue={item.text} />
          {item.text}
        </li>
      ))}
    </ul>
  );
}
// 删除 "第一项" 后：
// key='a' 的组件被彻底移除，key='b' 的组件保持不变
// 输入框内容不会错乱

const element = (
  <div className="greeting">
    <h1>你好，{name}！</h1>
    <p>欢迎学习 React</p>
  </div>
);

// JSX 每个标签都会被转换为 React.createElement() 调用
const element = React.createElement(
  "div", // 参数1：标签类型（HTML标签名或组件名）
  { className: "greeting" }, // 参数2：属性对象（props）
  React.createElement(
    // 参数3...：子元素（可以无限嵌套）
    "h1",
    null, // h1 没有属性，传 null
    "你好，", // 文本子节点
    name, // 变量子节点
    "！",
  ),
  React.createElement(
    // 另一个子元素
    "p",
    null,
    "欢迎学习 React",
  ),
);

// React.createElement 的返回值是一个普通的 JS 对象（称为"虚拟 DOM"）
{
  type: 'div',
  props: {
    className: 'greeting',
    children: [
      {
        type: 'h1',
        props: {
          children: ['你好，', '小明', '！']
        }
      },
      {
        type: 'p',
        props: {
          children: '欢迎学习 React'
        }
      }
    ]
  }
}

你写的 JSX 代码
      │
      ▼
  [Babel 编译]
      │
      ▼
React.createElement() 调用
      │
      ▼
  虚拟 DOM 对象（JS 对象树）
      │
      ▼
  [React 调和算法 (Reconciliation)]
      │
      ▼
  真实 DOM 更新（浏览器渲染）

// 严格模式的基本使用
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {" "}
    {/* 👈 严格模式包裹 */}
    <App />
  </React.StrictMode>,
);
// 在这个包裹范围内的所有组件都会受到严格检查

// ❌ 问题代码：使用了过时的生命周期
class OldComponent extends React.Component {
  componentWillMount() {
    // ⚠️ 已废弃！
    console.log("组件将要挂载");
  }

  componentWillReceiveProps() {
    // ⚠️ 已废弃！
    console.log("组件将要接收新的 props");
  }

  componentWillUpdate() {
    // ⚠️ 已废弃！
    console.log("组件将要更新");
  }

  render() {
    return <div>旧版组件</div>;
  }
}
// 严格模式下的控制台警告：
// Warning: componentWillMount has been renamed, and is not recommended for use.

// ✅ 修复方案：使用新的生命周期方法或 Hooks
// 类组件修复
class NewComponent extends React.Component {
  componentDidMount() {
    // ✅ 使用 DidMount 替代 WillMount
    console.log("组件已挂载");
    // 这里发网络请求是安全的
  }

  componentDidUpdate(prevProps) {
    // ✅ 使用 DidUpdate
    console.log("组件已更新");
  }

  render() {
    return <div>新版组件</div>;
  }
}

// 函数组件 + Hooks 修复（现代推荐写法）
function ModernComponent() {
  useEffect(() => {
    console.log("组件已挂载");
    // 这里发网络请求是安全的
  }, []);

  return <div>现代组件</div>;
}

// ❌ 问题代码：使用过时的 findDOMNode
class OldRefDemo extends React.Component {
  myRef = React.createRef();

  componentDidMount() {
    // findDOMNode 是同步 API，在并发模式下可能出问题
    const node = ReactDOM.findDOMNode(this); // ⚠️ 过时 API
    node.style.color = "red";
  }

  render() {
    return <div>旧版 Ref 用法</div>;
  }
}

// 严格模式警告：
// findDOMNode is deprecated in StrictMode.

// ✅ 修复方案：使用 createRef 或 useRef
function ModernRefDemo() {
  const divRef = useRef(null); // ✅ 用 useRef 创建引用

  useEffect(() => {
    if (divRef.current) {
      divRef.current.style.color = "red"; // 直接通过 ref 访问 DOM
    }
  }, []);

  return <div ref={divRef}>新版 Ref 用法</div>;
}

// ❌ 问题代码：使用过时的 Context API
import React from "react";

// 旧的 context 类型声明方式
class OldContextProvider extends React.Component {
  // 旧版 contextTypes 已不推荐
  static childContextTypes = {
    theme: PropTypes.string,
  };

  getChildContext() {
    // ⚠️ 旧版 Context API
    return { theme: "dark" };
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

// ✅ 修复方案：使用新版 Context API
const ThemeContext = React.createContext("light"); // 新版 Context

function NewContextProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // 用 Hook 读取
  return <button className={theme}>主题按钮</button>;
}

// ❌ 问题代码：在渲染阶段执行副作用
function BadComponent({ userId }) {
  // 在组件函数体中直接发请求——这是大忌！
  fetch(`/api/user/${userId}`) // ⚠️ 渲染阶段有副作用
    .then((res) => res.json())
    .then((data) => {
      // 这种写法会导致不可预测的问题
    });

  // 在函数体中直接修改外部变量——也是大忌！
  localStorage.setItem("lastUserId", userId); // ⚠️ 副作用

  return <div>用户 ID：{userId}</div>;
}
// 严格模式会故意渲染两次，上面的 fetch 会发两次请求，localStorage 会写入两次！

// ✅ 修复方案：把副作用放到 useEffect 中
function GoodComponent({ userId }) {
  useEffect(() => {
    // 副作用正确地放在了 useEffect 里
    fetch(`/api/user/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        // 处理数据
      });

    localStorage.setItem("lastUserId", userId);
  }, [userId]); // 依赖 userId，它变化时才重新执行

  return <div>用户 ID：{userId}</div>;
}

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

  useEffect(() => {
    console.log("useEffect 执行了"); // 开发环境下会打印两次！
    console.log("count =", count);

    return () => {
      console.log("清理函数执行了"); // 也会打印！
    };
  }, []);

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

// 开发环境控制台输出：
// useEffect 执行了
// count = 0
// 清理函数执行了         ← 注意：React 先执行清理
// useEffect 执行了       ← 然后再执行一次 Effect
// count = 0
// ✅ 生产环境只输出一次：
// useEffect 执行了
// count = 0

// ❌ 问题代码：没有返回清理函数
function BadListener() {
  useEffect(() => {
    // 添加了窗口滚动监听
    window.addEventListener("scroll", handleScroll);
    // ⚠️ 但是忘记在组件卸载时移除！内存泄漏！
  }, []); // 没有返回清理函数

  const handleScroll = () => {
    console.log("页面滚动了");
  };

  return <div style={{ height: "200vh" }}>滚动页面测试</div>;
}
// 严格模式：挂载→卸载→再挂载
// 第一次挂载：添加了 1 个监听器
// 卸载时：没有移除！监听器还在！
// 第二次挂载：又添加了 1 个监听器
// 结果：实际上有 2 个监听器在跑，handleScroll 被调用了两次！

// ✅ 正确代码：返回清理函数
function GoodListener() {
  useEffect(() => {
    const handleScroll = () => {
      console.log("页面滚动了");
    };

    window.addEventListener("scroll", handleScroll);

    // ✅ 返回一个清理函数——组件卸载时 React 会自动调用它
    return () => {
      window.removeEventListener("scroll", handleScroll);
      console.log("已移除滚动监听");
    };
  }, []);

  return <div style={{ height: "200vh" }}>滚动页面测试</div>;
}
// 严格模式执行流程：
// 挂载 → 添加监听器 1
// 卸载 → 清理函数执行，移除监听器 1 ✅
// 再挂载 → 添加监听器 2
// 最终只有 1 个监听器在运行 ✅

// ❌ 问题代码：定时器泄露
function BadTimer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount((c) => c + 1); // ⚠️ 每1秒+1，但组件卸载后定时器还在跑！
    }, 1000);
    // ⚠️ 没有清理定时器——即使离开页面，计数器仍在后台运行
  }, []);

  return <div>计数：{count}</div>;
}
// 用户离开页面后，setInterval 依然在运行，造成内存泄漏和无效渲染

// ✅ 正确代码：清理定时器
function GoodTimer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);

    // ✅ 清理函数中清除定时器
    return () => {
      clearInterval(timerId);
      console.log("已清除定时器");
    };
  }, []);

  return <div>计数：{count}</div>;
}

// src/index.js —— 应用入口文件
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
// 效果：App 组件及其所有子组件都会受到严格检查

// 在整个应用中，只想对特定部分进行严格检查
function App() {
  return (
    <div>
      <Header /> {/* 不受严格检查 */}
      {/* 只对 Dashboard 部分做严格检查 */}
      <React.StrictMode>
        <Dashboard /> {/* 受严格检查 */}
      </React.StrictMode>
      <Footer /> {/* 不受严格检查 */}
    </div>
  );
}

function App() {
  return (
    <React.StrictMode>
      <Header />
      {/* 嵌套不会造成问题，但也没必要——一个就够了 */}
      <React.StrictMode>
        <Dashboard />
      </React.StrictMode>
      <Footer />
    </React.StrictMode>
  );
}
// 效果和方式一一样，嵌套不会产生额外影响

function UserCard() {
  const user = { name: '小红', age: 25, role: 'admin' };
  return
    <div class="card">
      <img src="avatar.jpg">
      <h1>用户：user.name</h1>
      <p>年龄：{user.age}</p>
      <label for="role">角色：</label>
    </div>
    <p>底部信息</p>
}

function ExamResult({ score }) {
  return (
    <div>
      <h2>考试成绩</h2>
      {/* 请在下面补全代码 */}
      <p>结果：__________</p>
    </div>
  );
}

function StudentList() {
  const students = ["张三", "李四", "王五"];

  return (
    <ul>
      {students.map((name, i) => {
        <li key={i}>{name}</li>;
      })}
    </ul>
  );
}

function DataDisplay({ loading, error, data }) {
  // 请在下方完成代码

  return <div>{/* 你的代码 */}</div>;
}

function UserCard() {
  const user = { name: "小红", age: 25, role: "admin" };
  return (
    <>
      {" "}
      {/* 用 Fragment 包裹多个元素 */}
      <div className="card">
        {" "}
        {/* class → className */}
        <img src="avatar.jpg" alt="头像" /> {/* 标签必须闭合 */}
        <h1>用户：{user.name}</h1> {/* user.name 放入 {} */}
        <p>年龄：{user.age}</p>
        <label htmlFor="role">角色：</label> {/* for → htmlFor */}
      </div>
      <p>底部信息</p>
    </>
  );
}

function ExamResult({ score }) {
  return (
    <div>
      <h2>考试成绩</h2>
      <p>结果：{score >= 60 ? "及格 ✅" : "不及格 ❌"}</p>
      {/* 三元运算是最简洁的二选一方案 */}
      {/* 也可以用 && 分两行：score >= 60 && <p>及格 ✅</p> */}
    </div>
  );
}

function StudentList() {
  const students = [
    { id: 1, name: "张三" },
    { id: 2, name: "李四" },
    { id: 3, name: "王五" },
  ];

  return (
    <ul>
      {students.map((student) => (
        // ✅ 用 () 隐式返回（箭头函数的简写）
        // ✅ 用 student.id 作为 key，而非 index
        <li key={student.id}>{student.name}</li>
      ))}
    </ul>
  );
}

function DataDisplay({ loading, error, data }) {
  // 方案：在 return 之前用 if 判断不同状态
  if (loading) {
    return (
      <div className="status-message">
        <p>加载中...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="error-message">
        <p>出错了：{error}</p>
      </div>
    );
  }

  // loading 为 false 且没有 error → 正常显示数据
  return (
    <div>
      <h2>数据列表</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            {item.name} — {item.value}
          </li>
        ))}
      </ul>
    </div>
  );
}