初次走入前端世界，各种生态，组件…造就了百花齐放的局面，这次，让我使用一个餐厅故事，一起来走入React的世界。
想象你正在经营一家现代化餐厅，这家餐厅就像一个React应用...
1.useState - 餐厅的智能记事本
const [orders, setOrders] = useState([]);
📘就像餐厅里的智能记事本，随时记录客人的订单。服务员（组件）不需要自己记住所有订单，只要看看这个记事本就知道该准备什么菜。每当有新订单，只需要更新记事本，整个餐厅系统就会自动响应。
组件中的state，代表其内部状态，在React不能修改传入的prop，就会使用state记录自身数据的变化。
prop 又为何物呢？
在React中，prop是 property的简写，是从外部传递给组件的数据，也就是参数。一个React组件通过定义自己能接受的prop，就定义了与外界通信的公共接口。
每个 React 都是一个独立的组件，组件之外的世界通过 prop 来和组件对话。
prop 的类型可以是 JavaScript 支持的任意一种数据类型，可以是字符串，也可以是函数。
2. useEffect - 餐厅的自动化系统
useEffect(() => {
const timer = setInterval(() => checkTableStatus(), 5000);
return () => clearInterval(timer);
}, []);
📠就像餐厅安装的自动化系统，定时检查餐桌状态、调节空调温度、处理在线订单。当客人离开时，系统会自动清理餐桌（清除副作用）。
3. useContext - 餐厅的广播系统
const theme = useContext(ThemeContext);
像餐厅的中央广播系统，让所有员工都能即时知道重要信息（比如当前的特惠菜品或营业状态），不需要一个个跑去通知。
4. useRef - 餐厅的固定资产记录
const tableRef = useRef(null);
就像餐厅的固定资产清单，记录着那些不会经常变动但需要随时查看的信息，比如桌位编号、设备序列号等。
5. 自定义Hook - 餐厅的标准操作手册
function useTableManager(tableId) {
const [status, setStatus] = useState('empty');
const [orders, setOrders] = useState([]);
useEffect(() => {
// 监控餐桌状态
const interval = setInterval(() => {
checkTableStatus(tableId);
}, 1000);
return () => clearInterval(interval);
}, [tableId]);
return { status, orders, setOrders };
}
像是餐厅制定的标准操作流程，把常用的工作流程打包好，让每个服务员都能轻松上手。
6. 场景展示：
function Table({ tableId }) {
// 使用智能记事本记录状态
const [isOccupied, setIsOccupied] = useState(false);
// 使用自动化系统监控
useEffect(() => {
// 当客人入座时
console.log(`Table ${tableId} is now ${isOccupied ? 'occupied' : 'empty'}`);
// 客人离开时自动清理
return () => {
console.log(`Cleaning table ${tableId}`);
};
}, [isOccupied, tableId]);
// 使用餐厅的通用配置
const settings = useContext(RestaurantContext);
return (
<div>
<h3>Table {tableId}</h3>
<p>Status: {isOccupied ? 'Occupied' : 'Available'}</p>
<button onClick={() => setIsOccupied(!isOccupied)}>
{isOccupied ? 'Clear Table' : 'Seat Guests'}
</button>
</div>
);
}
在这个故事中，Hook就像是餐厅的各种智能系统，帮助餐厅（React应用）实现：
- 处理自动化任务（useEffect）
- 管理即时状态（useState）
- 共享全局信息（useContext）
- 资源管理（useRef）
- 封装业务逻辑（自定义Hook）
以上函数称之为Hook，在前端中Hook是一种特殊的函数，可以允许在不写class的情况下使用state和其他React的功能。
