React必须掌握的知识[一]
type
status
date
slug
summary
tags
category
icon
password
学习内容
初次走入前端世界，各种生态，组件…造就了百花齐放的局面，这次，让我使用一个餐厅故事，一起来走入React的世界。
想象你正在经营一家现代化餐厅，这家餐厅就像一个React应用...
1.useState - 餐厅的智能记事本
📘就像餐厅里的智能记事本，随时记录客人的订单。服务员（组件）不需要自己记住所有订单，只要看看这个记事本就知道该准备什么菜。每当有新订单，只需要更新记事本，整个餐厅系统就会自动响应。
组件中的state，代表其内部状态，在React不能修改传入的prop，就会使用state记录自身数据的变化。
prop 又为何物呢？
在React中，prop是 property的简写，是从外部传递给组件的数据，也就是参数。一个React组件通过定义自己能接受的prop，就定义了与外界通信的公共接口。
每个 React 都是一个独立的组件，组件之外的世界通过 prop 来和组件对话。
prop 的类型可以是 JavaScript 支持的任意一种数据类型，可以是字符串，也可以是函数。
2. useEffect - 餐厅的自动化系统
📠就像餐厅安装的自动化系统，定时检查餐桌状态、调节空调温度、处理在线订单。当客人离开时，系统会自动清理餐桌（清除副作用）。
3. useContext - 餐厅的广播系统
像餐厅的中央广播系统，让所有员工都能即时知道重要信息（比如当前的特惠菜品或营业状态），不需要一个个跑去通知。
4. useRef - 餐厅的固定资产记录
就像餐厅的固定资产清单，记录着那些不会经常变动但需要随时查看的信息，比如桌位编号、设备序列号等。
5. 自定义Hook - 餐厅的标准操作手册
像是餐厅制定的标准操作流程，把常用的工作流程打包好，让每个服务员都能轻松上手。
6. 场景展示：
在这个故事中，Hook就像是餐厅的各种智能系统，帮助餐厅（React应用）实现：
- 处理自动化任务（useEffect）
- 管理即时状态（useState）
- 共享全局信息（useContext）
- 资源管理（useRef）
- 封装业务逻辑（自定义Hook）
以上函数称之为Hook，在前端中Hook是一种特殊的函数，可以允许在不写class的情况下使用state和其他React的功能。
React必须掌握的知识[一]