🧱 一、什么是 React 组件？

通俗说：

组件就像“积木”一样，你可以用它来拼出一个完整的网页或 App。
每个组件就是一个独立的小功能模块，可以反复使用。

比如：

function Hello() {
  return <h1>你好，React！</h1>;
}

这个就是一个最简单的组件，叫 Hello，用的时候像标签一样写：

<Hello />

其实组件就像一个函数。

---

✌️ 二、组件的两种写法

✅ 1. 函数组件（Function Component） ✅ 推荐写法！

function Welcome() {
  return <h1>欢迎来到我的网站！</h1>;
}

或者更简洁写法：

const Welcome = () => <h1>欢迎！</h1>;

---

✅ 2. 类组件（Class Component）（现在用得少）

class Welcome extends React.Component {
  render() {
    return <h1>欢迎！</h1>;
  }
}

👉 现在开发中大多数都用 函数组件 + Hooks，因为更简单、功能更强大。

---

🔗 三、组件可以“组合”和“嵌套”

组件之间像搭积木，可以一个里面放一个：

function Header() {
  return <h2>我是头部</h2>;
}

function Footer() {
  return <h4>我是尾部</h4>;
}

function Page() {
  return (
    <div>
      <Header />
      <p>这里是正文内容</p>
      <Footer />
    </div>
  );
}

---

📦 四、组件可以“传参数”（Props）

组件可以像函数一样“传参数”进去：

function Greeting(props) {
  return <h1>你好，{props.name}！</h1>;
}

<Greeting name="小明" />
<Greeting name="小红" />

---

💾 五、组件可以有自己的“状态”（State）

比如做一个计数器组件：

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>点我 +1</button>
    </div>
  );
}

• useState() 是 React 的 Hook，可以让函数组件拥有“自己的数据”

• 点按钮时 count 会更新，页面也会自动刷新

---

🧠 总结口诀：

概念	通俗理解
组件	一个小积木，能反复用
props	组件传值
state	组件自己的数据
嵌套	组件里可以放组件
Hooks	给函数组件加功能的小工具