登录社区云,与社区用户共同成长
邀请您加入社区
大家好,我是一名正在学习大模型应用开发的研究生。最近跟着导师做了一个扫地机器人智能问答Agent的项目,用的是ReAct+RAG的技术方案。说实话,一开始我是懵的——什么ReAct、什么RAG、什么LangChain,听着都很高大上,但真的上手的时候,连环境都搭了半天。现在项目终于跑通了,我想着把整个过程整理成一篇博客,一方面是给自己做个总结,另一方面也希望能帮到和我一样刚入门的同学。毕竟我踩过的
这问题不算罕见。这四个词最近两年出现频率极高,很多人用了很久也没真正搞清楚边界。今天统一讲一遍,用一个比喻拉通,读完应该不会再混。
这大半年我用 Claude Code 做 AlgoMooc 这个网站,经常一开就是很长的会话。有个现象遇到过不止一次:会话开久了,前面花好多轮才确认下来的关键结论,它后面像是完全没印象了,再问起来还得从头查一遍。
我们来把整篇文章做一个收束。规划= 思维能力:把大问题拆成小问题记忆= 知识积累:知道的越多,决策越准工具= 行动能力:不只是想,还能做。
很多人第一次看到 MCP,会把它理解成 Function Calling 的升级版。这个说法不准确。MCP 和 Function Calling 不是谁淘汰谁,而是解决的问题不在同一层。
教育培训内容创作者经常面临一个棘手的场景:把 PDF 课件转成带讲解音频和动画的完整教学视频时,传统剪辑软件总是在音频同步、批量个性化、以及后期迭代上卡住。手动对齐每一帧动画,调整几十个课件的变体,时间和精力消耗巨大。而 Remotion 提供了一条完全不同的路径——用 React 代码直接定义视频的每一帧,让前端开发者能像写页面一样“写”视频。我起初以为视频制作终究离不开专业的图形界面和拖拽时间
假设第一次父组件传递过来的 showNumber 为 true,此时就会渲染第一个 hook;第一次:useState -> useState。第二次:useState -> useRef。体现在我们开发者眼中就是报错。该示例来源:渡一教育。示例来源:渡一教育。
定义工具我们仅需要确定工具的函数的入参及返回的结果即可。对于如上我们设计的场景,一共需要两个工具,其一是用来根据关键词检索`Serper API`,返回详细的检索信息。其二是一个计算函数,接收的入参是需要执行计算操作的数值,返回最终的计算结果。# API参数params = {'api_key': '0f31d8c5561bdaa4c71ad7c86f6e63a4a26cead9', # 使用您自
React 19 引入的 useActionState Hook 通过精巧的设计简化了异步状态管理。它将原本需要多个 useState 和样板代码的表单处理逻辑,封装成一个简洁的 API,返回状态、分发函数和 pending 状态。其内部实现基于三个协作 Hook:状态管理、pending 追踪和动作队列。该 API 从 useFormState 更名为 useActionState,反映了 Re
updateQueue 是挂在 Fiber / Hook 上的更新队列(链表),用于缓存 setState 产生的 update,并在 render 阶段按优先级(lane)依次计算出新的 state。setState这些方法使用相同的更新流程,因为它们都使用 updateQueue 这个数据结构。setState↓创建 update(带 lane)↓加入 updateQueue(环形链表)↓↓r
记录 Monorepo 中 Web 与 Electron 端 React "Invalid hook call" 的完整排查过程,涵盖版本错配、实例混用、CSP 拦截等根因分析与修复方案。
1. 创建场景(Scene) 2. 创建相机(Camera) 3. 创建渲染器(Renderer) 4. 创建物体(Geometry + Material + Mesh) 5. 添加物体到场景 6. 开启动画循环(animate) 7. 销毁清理(useEffect return)
React useRef 教程:深度解析与应用场景 本文全面介绍了React中useRef的核心用法和注意事项。useRef主要用于两种场景:1)直接操作DOM节点,如表单自动聚焦;2)存储不需要触发UI更新的变量,如计时器ID。与useState相比,useRef的修改不会触发组件重新渲染,且能在多次渲染间保持值不变。 文章详细对比了useRef与useState的特性差异,并提供了常见错误示例
本文介绍了使用React的useMemo Hook高效渲染大规模数据集的方法。通过构建一个包含50,000个数据点的折线图案例,阐述了useMemo如何解决大数据渲染中的性能问题:1)避免重复计算,只在依赖项变化时重新生成数据;2)维持稳定的内存引用,防止图表不必要的重绘。文章详细说明了实现步骤,包括项目初始化、代码实现和性能优化原理,并给出了useMemo的最佳实践场景:处理大规模数据、昂贵计算
这是同步加载,webpack打包时就会把dog.js代码和app合并在一起,如果dog模块代码非常大,生成的文件就很大。当webpack打包时,只要遇到()=>import()这样的语法,会切割生成一个新的JS文件(chunk)比如在文件中有方法在项目中任何地方都没用到,可以开启tree-sharking,把这个死代码摇掉。dog现在是function,现在没有调用,不会引入app.js,会新开一
React核心三要素:组件化开发、状态管理和Props传值。组件通过函数式写法拆分页面模块,使用useState实现数据驱动视图更新,Props完成父子组件通信。项目结构采用模块化设计,包含api请求、公共组件、路由配置等标准化目录。关键技术点包括:1) useEffect处理副作用和生命周期;2) 条件渲染与列表循环;3) 表单双向绑定;4) 组件通信(父子传值、Context跨层传递)。典型场
e18e 项目的 James Garbutt 分析了导致 node_modules 膨胀的三大元凶:不必要的 ES3 兼容包、过度微化的库以及……Vavite 6 是一个用于开发和构建服务端 Node 应用的 Vite 插件,让你可以在一个应用的前后端同时使用 Vite,完整支持……在页面上的区域绘图(如签名或手写内容),点击按钮,就能获得可嵌入项目的 Motion 代码……这款流行的"引导式教程
React作为主流前端框架,通过虚拟DOM和组件化开发解决了传统DOM操作繁琐的问题。其核心优势包括JSX语法、单向数据流和Hooks机制,适合SPA、大型项目和跨平台开发。虽然学习曲线较陡且依赖第三方库,但生态完善、社区活跃,仍是前端开发必备技能。React持续更新且市场需求大,掌握后可提升开发效率和就业竞争力。
Redux是JS应用的状态容器,他并不是只能在React中使用,而是可以应用到任意的JS应用中(前端JS,node.js)作用:自动生成reducer+action,简化状态操作。有时我们会需要多个切片,可以把他们放到两个文件里。核心API:createSlice(创建切片)创建store(configureStore)isFetching:布尔值,数据是否正在加载。isLoading:布尔值,数
特点:用函数式编程,没有生命周期,也没有state,没有this,没有上下文,没有ref,什么特性都没有。组件是UI(用户界面)的一部分,它拥有自己的逻辑和外观。特点:用ES6面向对象语法,有生命周期、有this、有state、有上下文、有ref。3、React组件有两种写法,一种是类组件的写法,一种是函数式组件写法。React组件必须以大写字母开头,而HTML标签则必须是小写字母。缺点:相对函数
通过在ScrollView上设置第一次点击即可触发按钮事件点击空白区域仍能正常收起键盘用户体验更加流畅。
本文深入解析React底层原理与高级开发实践,涵盖Fiber架构、Hooks实现、性能优化等核心内容。主要内容包括: React底层机制 Fiber架构实现异步可中断渲染 Diff算法三假设优化DOM操作 Hooks链表设计与闭包陷阱解决方案 合成事件系统实现原理 高级开发技巧 自定义Hooks设计模式与复用策略 状态管理选型(Zustand/Redux Toolkit) 路由权限控制与代码分割优
React组件可以通过嵌套、传递属性等方式,组合成更复杂的组件。比如将按钮组件、输入框组件组合成表单组件,将表单组件、列表组件组合成页面组件,这种组合方式灵活多变,能够适配不同的业务需求。同时,React通过Props传递数据,实现组件之间的通信,父组件可以将数据传递给子组件,子组件通过Props接收并使用这些数据,确保了组件之间的数据流通和协同工作。React认为,任何复杂的页面都可以拆分为多个
diff算法;Vue2/3;React;
/ 阿里企业级前端分层规范(简化版)// 来源:Alibaba D2 前端规范论坛 2024 年度最佳实践/*** 【强制】视图层禁止直接调用 API* ❌ 错误示例:* ✅ 正确示例:*/// 视图层(View)- 只负责渲染// ✅ 允许:组合组件、调用 Hooks// ❌ 禁止:直接调用 API、书写业务逻辑// 业务层(Service)- 编排业务流程// ✅ 允许:调用多个 API、组合
把这种几十个页面的需求丢给以前的AI,可能出来一堆不能用的页面。因为大部分AI给的通常是无法直通开发的代码,没有组件复用,没有路由,稍微加点真实的业务逻辑,代码直接报废。比如做较大的复杂项目,AI如果一次性生成几十个界面,整体的风格连贯性容易有偏离,且生成速度随页面数增长明显变慢,后期的二次修改量比较大。在实操AI生成应用时,你丢给它一个偏宏大的需求,比如“做一个带AI助手和社区交流的工具APP”
React 商品搜索与 API 演示项目摘要 该项目是一个基于 React + Vite + React Router 构建的前端演示项目,主要包含三个功能模块: 商品搜索功能:使用前端静态数据实现实时模糊搜索,支持不区分大小写的商品筛选 多页面路由:通过 React Router v6 实现页面导航,包含首页、商品搜索页和API演示页 API请求演示:展示如何通过 GET/POST 请求调用公开
本文介绍了React的核心概念JSX与组件思维。JSX是React.createElement()的语法糖,允许在JavaScript中编写类似HTML的结构,需遵循根元素、表达式花括号等规则。组件本质是接收props返回UI的函数,提倡函数组件而非类组件。Props是只读的父传子数据流,组件拆分应考虑复用性和独立逻辑。React通过声明式编程解决了传统手动操作DOM的状态同步问题,开发者只需描述
现代前端框架中Grid与Flexbox混用的7大性能陷阱:1)状态提升引发全局重渲染,应隔离布局状态;2)动态尺寸变化导致级联回流,推荐使用transform优化;3)Grid与虚拟列表冲突,建议静态内容使用Grid;4)滥用flex:1造成内存浪费,需配合ResizeObserver;5)v-if/key变更导致布局重建,改用v-show/稳定ID;6)CSS-in-JS动态样式触发重复计算,优
摘要: React 的核心概念是状态(State),它使组件能够动态更新。通过 useState Hook,函数组件可以存储和修改状态,触发自动重新渲染。状态更新是异步的,建议使用函数式更新确保准确性。事件处理采用驼峰命名,并封装为 SyntheticEvent。表单推荐使用受控组件,由 React 状态完全控制输入值。兄弟组件共享状态时,需通过状态提升将状态移至共同父组件。这些机制共同构成了 R
React Query 和 Zustand 的正确分工:React Query 管理服务端状态(如接口数据),Zustand 管理客户端状态(如筛选条件)。常见错误是将接口数据复制到 Zustand,导致重复数据源和同步问题。正确做法是让 React Query 缓存接口数据,Zustand 只存储交互状态(分页、搜索条件等)。这种分工能避免状态管理混乱,保持代码清晰可维护。
后来我参考了taocarts的前端架构,用Vue3 + Pinia 重写了整个代购系统的用户端。taocarts 的前端用的是 React + Redux Toolkit,它的 store 设计得特别细:一个 productSlice 存商品,一个 cartSlice 存本地购物车,还有一个 consolidationSlice 专门处理合箱。后来我参考 taocarts 的做法:前端只负责展示待
摘要:本文探讨前端表格模块的工程化实践,通过React Query、TanStack Table和shadcn/ui的组合方案解决复杂表格需求。文章从简单表格的问题出发,逐步构建包含请求层、类型层、Service层等8个层级的清晰架构,重点阐述服务端分页与虚拟滚动的实现。核心在于明确各工具职责边界:React Query处理请求与缓存,TanStack Table管理表格状态,shadcn/ui负
在 2026 年,React 依然占据着前端市场份额的半壁江山。尤其是在 2025 年底全面普及后,开发者终于不用再痛苦地手动写useMemo和了。然而,随着 React 深度绑定 Next.js 并全面转向,它的底层架构变得越来越重。根据近期的技术调研,Next.js 的开发者满意度出现了明显下滑。这种“全栈疲劳”和对复杂度的厌倦,催生了 2026 年前端界对 React 替代者的强烈需求。
react.js
——react.js
联系我们(工作时间:8:30-22:00)
400-660-0108 kefu@csdn.net