求React有状态与无状态组件示例及易懂类比，解惑差异

一、优质示例 #

1. 无状态组件（展示型/纯组件） #

这类组件只接收外部传入的props，不管理内部状态，仅负责渲染界面，逻辑简单且可复用性强。

// 用户信息展示组件：仅接收props渲染内容
const UserProfile = ({ name, avatarUrl, bio }) => {
  return (
    <div className="user-profile">
      <img src={avatarUrl} alt={`${name}的头像`} />
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
};

// 使用时直接传入props
<UserProfile 
  name="张三" 
  avatarUrl="/avatar-zhangsan.png" 
  bio="热爱前端开发的程序员" 
/>

2. 有状态组件（容器型/逻辑型组件） #

这类组件会管理内部状态，处理用户交互、数据更新等逻辑，通常会把状态或处理后的结果传递给无状态组件渲染。

import { useState } from 'react';

// 计数器组件：管理内部计数状态并处理交互
const Counter = () => {
  // 声明内部状态count，初始值为0
  const [count, setCount] = useState(0);

  // 处理计数增加的逻辑
  const handleIncrement = () => {
    setCount(count + 1);
  };

  // 处理计数减少的逻辑
  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter">
      <h3>当前计数：{count}</h3>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

二、类比与领悟瞬间 #

1. 接地气类比 #

• 无状态组件 = 餐厅服务员：只负责把后厨（父组件/外部数据源）做好的菜（props）端给顾客（用户），自己不参与做菜，也不记谁点了什么，给什么就上什么，重复做相同的事儿也不会出错。
• 有状态组件 = 餐厅收银台：要实时记录当前营收（内部状态），处理顾客结账（交互逻辑），还要更新自己的记录，同时会把账单信息同步给后厨或服务员，是整个流程里“管事儿”的角色。

2. 领悟瞬间 #

之前写Todo列表的时候，一开始把所有逻辑都堆在一个组件里：既要渲染每一条Todo，又要处理添加、删除Todo的逻辑，代码越写越乱。后来试着拆分：把渲染单条Todo的部分抽成无状态组件，只接收Todo内容和删除回调；父组件专门管理整个Todo数组的状态，以及添加、删除的逻辑。

拆分完瞬间就通了：无状态组件的核心是“展示”，不管数据从哪来、怎么改；有状态组件的核心是“管理”，负责数据的存储和更新逻辑。两者分工明确，代码一下子清爽了，之后再写组件就自然会先想：这部分是只管展示，还是要管数据变化？

内容的提问来源于stack exchange，提问作者curious_orange