1. 引言

上个星期的工作内容是写IT资产管理的前端页面。其实，尽管我之前有一些前端开发的经验，但并不是很多。这次让我独立完成一个页面的开发，刚开始时我感到无从下手。

2. 初期的困惑和焦虑

我记得在星期一和星期二的时候，那两天真的非常焦虑。我找到了设备入库的代码，想参考着这个页面来写，发现内容非常多，而且很多文件之间是相互关联的，并不是完全独立的。我就很困惑，思路也很混乱，不知道该从哪里开始。

3. 思维混乱的原因

其实在周二晚上，我反复思考，最后觉得，我在思维上太过混乱，始终没有理清页面的代码框架。此外，我写的时候很急躁，没有明确的方向，只是东一榔头西一棒槌地写了一些代码，这样的方式显然是不可行的。

4. 决定理清代码框架

周三早上，我决定不再急于写代码，而是花了整个上午的时间来理清我要模仿的页面的代码框架，并构建一个IT资产管理中IT设备列表页面的框架。

5. 设备入库页面的代码框架

设备入库的代码框架包括一个主页面和一个子页面。主页面负责总体布局和导航，而子页面则由多个组件组成，每个组件处理特定的功能。子页面中的各个部分用方框框住，并将其作为Components目录下的各个文件。

5.1 设备入库页面（主页面）

主页面负责总体布局和导航，包括页面的基本结构和主要导航功能。

5.2 设备入库的子页面

子页面由多个组件组成，每个组件处理特定的功能。

6. 构建IT设备列表页面的框架

当我知道了要模仿的页面的框架后，我就可以参考这个框架来编写我需要的页面的框架了。我的框架打算写成这样：

• 主页面：负责总体布局和导航。
• 子页面：由多个组件组成，每个组件处理特定的功能。

7. 代码编写的经过

现在回顾上个星期的工作，我发现，当我把页面的框架搭建出来之后，后续的工作基本上就没有太大的难度了。我只需要按照设备入库页面的文件结构来编写新的页面即可。具体来说，我先将设备入库的代码拷贝过来，然后逐行进行修改。这种修改基本上没有太大的技术难度，只是一些重复性的工作。再加上有AI的帮助，整个过程变得更加高效。我记得只用了一个下午的时间，就顺利完成了这个任务。

8. 深度思考

因为React是组件化编程，所以在开发过程中，理清框架是至关重要的。如果没有一个清晰的框架，代码就会变得非常混乱。只要你把框架捋清楚了，之后的工作就会变得相对简单。我之前一直没有什么思路，就是因为没有把框架搞懂。如果你搞不懂框架，就没有明确的目标，也不知道下一步该干什么，就像无头苍蝇一样乱撞。这样不仅写出来的代码质量很差，而且还容易越来越迷失方向。

正确的步骤应该是：

1. 找到你要模仿的页面：首先，确定一个你想要模仿的页面，作为参考。
2. 梳理好这个页面的框架：仔细分析并理解这个页面的结构和组件关系，理清其框架。
3. 写出你自己要写的页面的框架：根据你对模仿页面的理解，搭建你自己的页面框架。
4. 粘贴和修改代码：将要模仿页面的代码粘贴到你自己的页面中，一个文件一个文件地进行粘贴和修改。