Langflow 系列 | 第 17 篇：React 前端架构：从应用入口到 Flow 画布

上一篇文章分析了 Langflow 如何把模型、Embedding、向量数据库、工具、MCP 和数据源封装成统一的内置组件。

这些组件最终都会被前端展示成一个个可以拖拽、配置、连线和运行的节点。

所以从这一篇开始，我们进入前端架构。

本文先不深入每个交互细节。

我们先回答一个更基础的问题：

Langflow 的 React 前端是如何从应用入口一路走到 Flow 画布的？

这条链路串起了几个关键部分：

1. App.tsx：应用根组件。
2. routes.tsx：页面路由树。
3. ContextWrapper：全局上下文注入。
4. AppInitPage：启动阶段的数据预取和认证恢复。
5. FlowPage：Flow 编辑页面壳。
6. PageComponent：基于@xyflow/react的主画布。
7. FlowSidebarComponent：组件模板侧边栏。
8. GenericNode：通用组件节点渲染。
9. flowStore/typesStore/flowsManagerStore：前