什么是无状态组件，与有状态组件的区别？

在 React 中，“无状态组件（Stateless Component）” 和 “有状态组件（Stateful Component）” 是两个非常核心的概念。
理解它们的区别，可以帮助你更好地组织组件、提升可维护性。

什么是无状态组件（Stateless Component）

无状态组件也叫 展示型组件（Presentational Component）。

特点：

• 不管理自己的 state

• 接收 props → 纯渲染 UI

• 不处理复杂逻辑

• 通常写成函数组件

• 相同输入（props）一定得到相同输出 → 类似 纯函数

示例：无状态组件

function UserName({ name }) {
  return <div>{name}</div>;
}

它没有内部状态，也没有生命周期，只负责展示。

什么是有状态组件（Stateful Component）

有状态组件也叫 容器组件（Container Component）。

特点：

• 自己管理 state

• 包含业务逻辑或数据处理

• 可以使用 Hook（useState、useEffect 等）

• props 改变、state 改变都会触发重新渲染

示例：有状态组件

import { useState } from "react";

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

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

这个组件内部拥有自己的状态，也具有行为逻辑。

无状态组件 vs 有状态组件（对比总结）

对比项	无状态组件（Stateless）	有状态组件（Stateful）
是否有 state	❌ 没有	✔ 有
是否有逻辑	少	多
是否依赖 props	✔ 完全依赖	部分依赖
是否独立管理数据	❌ 不管理	✔ 自己管理
是否更容易复用	✔ 是	❌ 相对难
性能	🔥 高（通常）	较低（要更新 state）
写法	函数组件（常见）	函数组件 + Hook 或 class
调试、维护	简单	相对复杂

为什么要尽量使用无状态组件？

因为：

• 逻辑更简单

• 可复用性更高

• 更容易测试

• 渲染更快

• bug 更少

React 的设计理念就是：

把 UI 拆分成尽量多的“无状态组件”，让状态集中管理。

真实项目中的例子

1. 无状态组件

比如封装按钮、Card、Tab 等 UI 展示类组件：

function UserAvatar({ url }) {
  return <img src={url} width="40" />;
}

2. 有状态组件

比如页面级逻辑组件：

function UserPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user/1").then(res => setUser(res));
  }, []);

  return user ? <UserName name={user.name} /> : "Loading...";
}

总结

无状态组件 = 只展示，不保存数据
有状态组件 = 存在 state，负责逻辑、数据、交互

实际开发中：

• UI 用无状态组件
• 页面或容器用有状态组件
• 逻辑拆出去放到 hooks（比如 useUser、useFetch）