React 学习笔记(一): 起步的一些问题记录

1️⃣ js 逻辑与 &&

• 强类型语言，一定会返回true或false
• 弱类型语言，例如python和js，按照短路求值和真值/假值机制，返回其中一个操作数，而不是强制布尔值。

"hi" && 123   // => 123
0 && "hi"     // => 0
false && "hi" // => false

所以以下两种写法等价：

<>
	{
		isLoggedIn ? (<AdminPanel />) : (<LoginPanel />)
	}
</>

// 当你不需要else分支时：
<>
	{ isLoggedIn && <AdminPanel /> }
</>

注意⚠️： 在React中，忽略 false、null、undefined → 不渲染任何东西；

2️⃣ React 渲染逻辑

<AdminPanel /> 会被React编译，返回一个React元素描述对象，而不是以调用函数的形式直接运行组件函数。

例如编译前：

<>
	<AdminPanel />
</>

编译后：

React.createElement(AdminPanel, null);

// React 17后：
import { jsx as _jsx } from "react/jsx-runtime";
_jsx(AdminPanel, {});

// 返回值，也即React元素对象长这样：
{
  type: AdminPanel,
  props: {},
  key: null,
  ref: null
}

3️⃣ React duplicate route id

🐛 写法 A

export default [
    index("routes/home.tsx"),      // 默认路由 /
    route("home", "routes/home.tsx") // /home
] satisfies RouteConfig;

写法A 做了什么?

• 内部生成的 routeId = 文件路径 → “routes/home”

• 故react报错duplicate route id

✅ 写法 B 正确示例

export default [
    route("/", "routes/home.tsx", { id: "your-route-id"}),    // /
    route("home", "routes/home.tsx")  // /home
] satisfies RouteConfig;

4️⃣ 默认导出与具名导出

默认导出

• 一个文件只能有 一个默认导出

• 导入时可以随意命名

示例：

// MyComponent.tsx
import React from "react";

const MyComponent = () => {
  return <div>Hello Default Export</div>;
};

export default MyComponent;

// App.tsx
import AnyName from "./MyComponent"; // 可以随意命名
function App() {
  return <AnyName />;
}

✅ 特点：

• 导入名称可以自定义

• 只能导出一个默认值

  注意⚠️ routes.ts中导入的路由文件只能默认导出。例如routes/home.tsx必须用默认导出方式

具名导出（named export）

• 一个文件可以有 多个具名导出

• 导入时必须使用 花括号 {} 并且名称必须匹配

示例：

// MyComponent.tsx
import React from "react";

export const Header = () => <h1>Header</h1>;
export const Footer = () => <footer>Footer</footer>;

// App.tsx
import { Header, Footer } from "./MyComponent"; // 必须用原名称
function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

✅ 特点：

• 可以导出多个函数/组件/变量

• 导入时名称必须和导出时一致（可以用 as 改名）

import { Header as Top } from "./MyComponent";
<Top />

5️⃣ 路由的绝对路径与相对路径

⚠️ 绝对路径以/开头，相对路径不以/开头