构建 Pagelyze 让我对 React 的新感悟

Translated for your language. 阅读原文.

AI-assisted draft.

构建 Pagelyze 教给我的 React 开发经验

构建 Pagelyze 改变了我对 React 的看法。我不再仅仅关注理论，而是开始关注产品架构。

Pagelyze 是一个网站审计工具。它不是一个简单的练习项目，而是需要处理审计报告、评分逻辑和仪表板。因此，我必须回答一个问题：

随着产品的增长，代码能否保持整洁？

像 useState 或 useEffect 这样的 Hooks 很重要，但它们并不是全部。即使使用了现代语法，代码可能依然难以维护。问题通常出在“职责”上。

在糟糕的设计中，一个文件会处理从加载数据到显示结果的所有事情。随着规模扩大，这种方式会失效。

更好的做法是按用途拆分组件：

每个部分只负责一项工作。你可以修改卡片设计，而不会破坏数据逻辑。

不要再纠结是否应该使用 Redux 或 Context，而要问：谁需要这个状态？

自定义 Hooks 应该代表某种行为，而不仅仅是将混乱的代码移动到另一个文件中。一个好的 Hook 应该负责获取数据，从而让页面组件只负责协调屏幕显示。

按功能组织文件夹结构：

路由不仅仅是 URL，它更是用户旅程。用户从落地页开始，进行免费审计，查看报告，最后发起服务咨询。良好的路由能引导他们进入下一步。

带着清晰的目标去构建。找到瓶颈，然后修复那个特定的部分。

React 的最佳实践在于决策。你决定组件拥有什么，你决定状态存储在哪里，你决定路由是否对用户有帮助。

Pagelyze 是我的测试。我测试的不是我能否构建一个页面，而是我能否在产品增长的过程中保持其代码的整洁。