Posts tagged with #Frontend

> 这是第一次设计这种比较完整的 Agent 系统并集成到实际应用中，因此记录一下实现 Google Drive Clone 的 Agent 部分的设计。 > LLM 调用直接使用 URL fetch 访问 Deepseek API，并且全部未使用 Agent 框架、直接手搓实现，之后可能会用框架重构一下。 Agent 包含的模块和交互流程如下： ```mermaid graph TD...

在 Nx 单体项目中，`package. json`、`tsconfig...

> 这几天在写一个项目的前后端部分时，因为之前没定义好类型后面写得很痛苦，现在整理一下自己重构后采用的一些设计。 Service 只负责定义自己需要的 DTO，如： ```typescript interface FileUploadDTO { userId: string; folderId: string; fileBuffer: Buffer; fileSize: number;...

下面我们通过讲解一下使用 React 实现购物车项目，进一步讲解 React Context、React Reducer 的一些知识。 最终效果如下： <Image src={image_image} alt="alt text" /> 我们在 `reducer/CartReducer. jsx` 中封装 Cart 的一些逻辑，具体实现和 `useState` 差不多：...

下面我们通过讲解一下使用 React 实现 翻牌游戏的小项目，进一步讲解 React Effect 的一些知识。 最终效果如下： <Image src={image_image} alt="alt text" /> 这个游戏的组件设计也很简单，只有 Card、Board 和用来装 Score 这些东西的 Header。 下面我们直接讨论游戏的流程引起的状态变化。首先先设计如下的状态：...

在 HTML 中，像 `<input>`, `<textarea>`, 和 `<select>` 这样的表单元素通常会自己维护其内部状态，并根据用户的输入自动更新： ```html <input type="text" name="username" /> ``` 当我们在这个输入框里打字时，是 DOM 节点本身在保存和显示这个值。 但是，React...

下面我们通过讲解一下使用 React 实现 CV 渲染的小项目，进一步讲解 React State 的一些知识。 最终效果如下（非常简陋的 CSS. ）： <Image src={image_image} alt="alt text" /> 首先我们对 CV 进行组件划分，这很简单：我们设计 GeneralInfoForm、PraticalForm、EducationForm...

在 React 中，`useState` 是处理组件状态最常用的 Hook。但随着组件逻辑变得复杂，状态更新散布在多个事件处理函数中，会导致组件变得臃肿且难以维护。 想象一个管理任务列表的组件，它需要处理添加、删除和编辑任务。如果使用 `useState`，代码可能如下： ```javascript function TaskManager() { const [tasks,...

在 React 的声明式世界中，我们通常让 React 来负责所有的 DOM 更新。但有时，我们需要一个“逃生舱口”来直接与 DOM 交互，或者在多次渲染之间“记住”一些不触发视图更新的信息。这就是 `useRef` 的用武之地。同时，为了应对不必要的重渲染带来的性能问题，React 提供了 `useMemo`、`useCallback` 和 `React. memo` 等一系列...

在 React 中，数据流通常是自上而下的（通过 props）。但当应用规模变大，组件层级变深时，在组件之间传递数据，尤其是全局状态（如用户登录信息、UI 主题），会变得非常繁琐。一个典型的例子就是 Props 钻探，它有下面的问题： 1. **代码冗余和可读性差**：许多组件的 props 列表会变得臃肿，包含了大量与自身无关的属性，使得组件的真实依赖关系模糊不清。 2...