什么时候应该将一个组件拆分成更小的部分？

组件代码变得太长或难以阅读
先例：建造房屋
就像你不会把整栋房子的设计图都放在一张图纸上，而是会为浴室、主卧、厨房等部分分别做具体的设计图。
React 示例：即使 <Navbar /> 组件在 App.js 中不需要被重用，你也可以把它单独提取出来，这样代码更清晰。
组件包含有自己功能的部分或区块（通常是可重用的）
先例：购物中心
在一个购物中心中，每个商店都有自己的员工、商品等，因此将每个“商店”封装成一个独立的部分是合理的。
React 示例：评论部分应该被渲染成一个可重用的 <Comment /> 组件。
组件承担了太多责任
先例：组织中的领导角色
在一个组织中，角色和任务应该分配给具体的人，而不是一个人承担所有的职责（例如：学术委员会主席、财务主管、运营主管等）。
React 示例：一个表单的提交按钮可能需要处理很多逻辑，因此可以将其提取成一个独立的组件来封装这些逻辑。

状态提升

当两个子组件都需要某个状态属性时，将该状态移植到父组件，通过props来传递

React生命周期

触发: <Steak /> 组件首次被调用。这被称为 挂载（Mounting）。

渲染: 子组件被调用，所需的计算完成。

提交: HTML DOM 被更新，显示出“steak”给用户。

React 组件的生命周期有三个主要阶段：
- Trigger（触发阶段）: 当组件首次被调用，或当组件的状态（state）发生变化时，会触发生命周期过程。类似于餐厅中，顾客下单时触发了订单。
- Render（渲染阶段）: React 运行组件中的 JavaScript 代码并调用任何子组件，进行必要的计算。这阶段就像餐厅中的厨师开始准备食物。
- Commit（提交阶段）: React 将返回的 JSX 更新到 HTML DOM 中，最终将渲染结果呈现给用户。就像餐厅的服务员把准备好的食物端到桌子上。
组件挂载（Mounting）：
- 在首次触发组件时（例如点击“订单”按钮），React 会开始挂载过程，进入触发阶段，然后进入渲染阶段，最终在提交阶段更新 DOM，将结果呈现给用户。
更新状态与重新渲染：
- 组件状态更新时（例如点击“送回厨房”按钮更改“熟度”），会触发 React 生命周期的再次运行：
  - 更新状态（例如修改熟度值），并进入新的渲染阶段。
  - 组件的渲染和提交过程会重复，更新后的 UI 会被呈现给用户。
组件卸载（Unmounting）：
- 当删除组件时（例如删除“牛排”），React 会执行组件卸载（Dismount），即从 HTML DOM 中移除组件。
React 中的状态（State）：
- 在组件生命周期中，状态（如 dness）是唯一能在重新渲染时保持的变量。
- 每次渲染阶段都执行代码，但只有状态（state）会在生命周期过程中被保留。非状态变量在每次渲染时都会丢失。
生命周期过程中的触发、渲染与提交：
- 触发是指当用户点击按钮或状态发生变化时，组件生命周期的启动。
- 渲染阶段是 React 根据组件逻辑渲染内容，调用子组件。
- 提交阶段是 React 将渲染结果最终提交到 HTML 中，更新 DOM。
React 生命周期总结：
- 组件首先进入挂载（mounting）阶段。
- 随着用户操作，组件进入更新（updating）阶段，React 会重新渲染组件并更新 DOM。
- 最后，组件会进入卸载（unmounting）阶段，从 DOM 中删除。

Hook

Hook是React提供的访问组件生命周期中部分组件的特殊函数。例如：useState允许我们控制组件的生命周期

`useEffect` Hook

在调用 setPersons 更新状态后，console.log(persons) 打印的 persons 可能不会立即显示更新后的值。原因在于 React 的状态更新是异步的，setPersons 会触发重新渲染组件，但这个过程不会立即生效，而是会在下一个渲染周期中执行。

因此，我们需要useEffect:

作用: 在特定变量发生变化后运行。
- 可以理解为对状态变化的响应。
常用场景:
- 用于与 React 外部的东西同步。
- 常用于将外部数据加载到组件的状态中。
- 在特定时机调用 API、执行计算等。
语法:
1
useEffect(function, optional dependency array)
- 每当依赖数组中的某个变量发生变化时，useEffect 中的 function 就会被执行。