一句话：元素（Element）是描述 UI 的不可变对象，组件（Component）是返回元素的函数或类；React 渲染的起点是元素，而组件是复用的单位。

一、React Element 是什么

// 元素就是一个普通对象（JSX 的产物）
const element = 
Hello
;

// 等价于
const element = {
  $$typeof: Symbol(react.element),
  type: 'h1',
  key: null,
  ref: null,
  props: {
    className: 'title',
    children: 'Hello',
  },
};

元素的三个关键特性：

// ❌ 不能这样「修改」元素
element.props.className = 'new';      // 无效且危险

// ✅ 重新创建一个元素
const newElement = 
Hello
;

// ✅ 用 cloneElement 基于旧元素创建新元素（谨慎使用）
const cloned = React.cloneElement(element, { className: 'new' });

「元素不可变」的实际含义：
  每次渲染都会重新执行组件函数 → 产生一棵新的元素树
  → React 比较新旧两棵树（diff）→ 只把差异应用到真实 DOM
  → 这就是「声明式 UI」：你描述「应该长什么样」，React 负责怎么改

二、元素与 DOM 节点的区别

// 元素 ≠ DOM 节点：下面打印的是对象，不是 DOM
function App() {
  const el = 
Hello
;
  console.log(el);              // { $$typeof: Symbol(react.element), type: 'div', ... }
  return el;
}

// 要拿到 DOM 节点必须用 ref
function App2() {
  const ref = useRef(null);
  useEffect(() => {
    console.log(ref.current);   // 真实 DOM 节点
  }, []);
  return 
Hello
;
}

三、组件的两种定义方式

// ① 函数组件（推荐）
function Welcome({ name }) {
  return 
Hello, {name}
;
}

// 也可以用箭头函数
const Welcome2 = ({ name }) => 
Hello, {name}
;

// ② 类组件（了解，新代码不推荐）
class Welcome3 extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

// ③ 两者可以混用（同一个应用里）
function App() {
  return (
    <>
      
      
    
  );
}

四、函数组件 vs 类组件

// 同一个计数器的两种写法对比

// 函数组件
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `点击了 ${count} 次`;
  }, [count]);                        // 依赖数组控制执行时机
  return  setCount((c) => c + 1)}>{count};
}

// 类组件
class Counter2 extends React.Component {
  state = { count: 0 };

  componentDidMount() {               // 初始化
    document.title = `点击了 0 次`;
  }

  componentDidUpdate(prevProps, prevState) {   // 更新（需要自己比较）
    if (prevState.count !== this.state.count) {
      document.title = `点击了 ${this.state.count} 次`;
    }
  }

  render() {
    return (
       this.setState((s) => ({ count: s.count + 1 }))}>
        {this.state.count}
      
    );
  }
}

为什么现在推荐函数组件：

① 逻辑复用更自然：自定义 Hook 把「状态 + 副作用 + 生命周期」打包，
   类组件的 HOC/render props 会带来「嵌套地狱」与「来源不明」问题
② 没有 this 的困扰（不需要 bind、不担心回调里的 this 丢失）
③ 与并发特性、React Compiler 等新能力配合更好
④ 代码更短、类型推导更准确（TS 场景）
⑤ 心智模型更简单：每次渲染就是「一次函数调用」

五、组件命名与组织

命名规范：
① 组件名必须【大写开头】（否则 JSX 会当 HTML 标签）
② 用 PascalCase（`UserCard`、`OrderList`）
③ 文件名与组件名一致（`UserCard.tsx`）
④ 一个文件一个主组件（小组件可以同文件，但不要过多）

组织方式：
atoms/        基础组件（Button、Input、Icon）
molecules/    组合组件（SearchBar、UserCard）
organisms/    业务组件（OrderTable、UserForm）
pages/        页面组件（路由级）
layouts/      布局组件（MainLayout、AuthLayout）

// 目录式组件（组件带自己样式与测试）
// components/
//   UserCard/
//     index.tsx
//     UserCard.module.css
//     UserCard.test.tsx

// components/UserCard/index.tsx
export function UserCard({ user }: { user: User }) {
  return 
{user.name}
;
}

六、<Comp /> 与 Comp() 的区别（重要）

function Child() {
  const [count, setCount] = useState(0);
  return  setCount((c) => c + 1)}>{count};
}

function ParentA() {
  return ;          // ✅ 创建元素，React 把它作为独立组件渲染
}

function ParentB() {
  return Child();            // ❌ 直接调用函数，返回值被内联
}

为什么 `Child()` 会出问题：
  React 通过 Fiber 树来管理「每个组件自己的 Hook 链表」。
  `Child()` 不产生新的 Fiber 节点 → Child 的 useState 被记到 Parent 的 Hook 链表里
  → 父组件每次渲染都会「多出一组 Hook」→ 调用顺序不一致 → 报错或状态错乱

报错示例：
  React has detected a change in the order of Hooks called by Parent

七、组件的 props 与 children

// 组件就是一个「接收 props 返回元素」的函数
function UserCard({ name, age, children }) {
  return (
    

      
{name}
      
{age} 岁
      {children}                    {/* 内容由使用方决定 */}
    
  );
}

// 使用

  来自北京

jsx  child
        ↓ 编译后等价于
js   

children 只是 props 的一个保留字段，没有特殊语义（不像 Vue 的 slot 有名字区分）。需要多个「插槽」时，用普通 props 传元素即可（见 [1.3 Props](./1.3-Props.md)）。

八、组件的组合与嵌套

// ① 组合（最常见）
function Page() {
  return (
    
      

      

        

      
      

九、常见坑

// ① 组件名小写开头 → 被当成 HTML 标签
function myButton() { return ; }
                  // ❌ 渲染出一个  空标签

// ② 直接调用组件函数
return Child();                // ❌ Hooks 归属错误

// ③ 把组件当普通函数传给事件
   // ❌ 立即执行（应传引用）
     // ✅

// ④ 返回多个根节点
return ( );          // ❌ 语法错误，需要 Fragment 包裹

// ⑤ 忘记 return
function Comp() {
  
;                     // ❌ 没有 return → 渲染为空
}

// ⑥ 箭头函数用 {} 却想返回对象
const foo = () => { name: 'a' };    // ❌ 被当作代码块
const foo2 = () => ({ name: 'a' }); // ✅

// ⑦ 类组件的 this 绑定丢失
class A extends React.Component {
  handle() { console.log(this); }
  render() { return ; }   // ❌ this 为 undefined
}
// ✅ 三种修复：构造函数 bind / 类字段箭头函数 / 渲染时 bind

// ⑧ 在组件内部定义组件
function Parent() {
  function Child() { return 
; }    // ❌ 每次渲染都是新组件 → 状态丢失
  return ;
}
// ✅ 定义在组件外部，或直接内联返回元素

// ⑧ 的深入解释：为什么「组件内定义组件」是灾难
function Parent() {
  function Child() {
    const [count, setCount] = useState(0);   // 每次渲染 Child 都是新函数
    return  setCount((c) => c + 1)}>{count};
  }
  const [n, setN] = useState(0);
  return (
    <>
       setN((x) => x + 1)}>父组件重渲染 {n}
              {/* ⚠️ 类型变了（新函数）→ React 卸载旧的、挂载新的 → 状态被重置 */}
    
  );
}