很多开发者在配置 GitHub SSH 的时候，通常是按照网上的教程，噼里啪啦一顿复制：先 ssh-keygen，再把公钥贴到 GitHub，最后 git push。如果一切顺利，你会觉得这是一种“魔

随着 DeepSeek 等国产大模型的爆发，前端开发者的主战场已经彻底转移： ❌ 不再是：我会不会调用模型 API ✅ 而是：我能不能编排一个稳定、可扩展、可演进的 AI 工作流 而 LangChai

本文详细介绍了前端开发中解决跨域问题的代理配置方案。针对Vue和React两大框架，分别讲解了基于Vite和Webpack的配置方法，包括基础设置、路径重写、HTTPS支持等场景。

前言 网上的给出的区别有很多，今天只是简单来回归下其中的一些流程和区别的关键点。 以下面的代码为例进行思考： 关于 watch 和 computed 的使用我们很多，这里我们不一一介绍，但是请记住：监

《闭包、RAG与AI面试官：一个前端程序员的奇幻LangChain之旅》 在某个风和日丽的下午，小李——一位自诩“能用一行代码解决的问题绝不用两行”的前端工程师——正坐在工位上，盯着屏幕上一行报错发呆

本文深入介绍了百度一站式全业务智能结算中台，其作为公司财务体系核心，支撑多业务线精准分润与资金流转。中台采用通用化、标准化设计，支持广告、补贴、订单等多种结算模式，实现周结与月结灵活管理。通过业务流程

先讲迭代器（Iterator）：就是“能一个个往外拿东西的容器” 你可以把迭代器想象成自动售货机： 你先有一堆商品（比如数组 [1,2,3]），把它们放进售货机里，这个售货机就是迭代器； 你每次按“出

好，我们深入第二章的第二小节：2.2 Node的模块实现！ 这一小节是第二章的核心部分，朴灵作者详细剖析了Node.js如何从源码层面实现CommonJS的require机制。整个过程分为三个关键步骤

以下是常见的几种实现方式 1. 传统滚动事件监听方式 监听到scroll事件后，调用目标元素的getBoundingClientRect()方法来实现。 缺点：性能较差，需要手动处理节流 2、使用In

🎯 我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台 前言 这是一个基于 NestJS + Vue3 + Prisma + Post

系列介绍 在 webgl 没出现之前，如果我们要在页面展示 3D 动画的效果，我们需要借助一些浏览器的插件进行实现。因此在 2011 年， webgl 诞生了，这套应用与 3D 应用的 API 能够让

在前端开发领域，Ant Design 一直是企业级 React 应用的首选 UI 库之一。随着 Ant Design 6.0 的发布，我们又见证了一次聚焦于组件功能与用户体验的革新。

Image组件 该组件是Next.js内置的图片组件，是基于原生img标签进行扩展，并不代表原生img标签不能使用。 尺寸优化：支持使用现代化图片格式，如webp，avif，apng等,并自动根据设备

你的node.js 后端有好的日志功能吗？有设置统一的返回格式吗？错误捕获做的怎么样？这篇文章统统帮你解决！

引言 哈喽大家好，原小道消息PinK将于18号公测，但是白天一整天迟迟未见。 终于在晚上19点左右PinK 0.0.1-alpha.1版发布了！不过alpha测试仅对部分开发者开放： 论坛瞬间炸开了锅

一、

最近，我写了好几篇 AI 教程，就收到留言，要我谈谈我自己的 AI 编程。

今天就来分享我的 AI 编程，也就是大家说的"氛围编程"（vibe coding）。

声明一下，我只是 AI 初级用户，不是高手。除了不想藏私，更多是为了抛砖引玉，跟大家交流。

二、

平时，我很少用 AI 生成新项目。因为每次看 AI 产出的代码，我总觉得那是别人的代码，不是我的。

如果整个项目都用 AI 生成，潜意识里，我感觉不到那是自己的项目。我的习惯是，更愿意自己写新项目的主体代码。

我主要把 AI 用在别人的项目和历史遗留代码，这可以避免读懂他人代码的巨大时间成本。

就拿历史遗留代码为例，（1）很多时候没有足够的文档，也没有作者的说明，（2）技术栈和工具库都过时了，读懂代码还要翻找以前的标准，（3）最极端的情况下，只有构建产物，没有源代码，根本无法着手。

AI 简直就是这类代码的救星，再古老的代码，它都能读懂和修改，甚至还能对构建产物进行逆向工程。

下面就是我怎么用 AI 处理历史遗留代码，平时我基本就是这样来 AI 编程。

三、

我的 AI 编程工具是 Claude Code。因为命令行对我更方便，也容易跟其他工具集成。

我使用的 AI 模型，大部分时间是国产的 MiniMax M2。我测过它的功能，相当不错，能够满足需要，它的排名也很靠前。

另外，它有包月价（29元人民币），属于最便宜的编程模型之一，可以放心大量使用，反复试错。要是改用大家都趋之若鹜的 Claude 系列模型，20美元的 Pro 套餐不够用，200美元的 Max 套餐又太贵。

MiniMax 接入 Claude Code 的方法，参考我的这篇教程。

四、

就在我写这篇文章的时候，MiniMax 本周进行了一次大升级，M2 模型升级到了 M2.1。

因为跟自己相关，我特别关注这次升级。

根据官方的发布声明，这次升级特别加强了"多语言编程能力"，对于常用编程语言（Rust、Java、Golang、C++、Kotlin、Objective-C、TypeScript、JavaScript 等）有专门强化。

它的 WebDev 与 AppDev 开发能力因此有大幅提升，可以用来开发复杂的 Web 应用和 Android/iOS 的原生 App。

"在软件工程相关场景的核心榜单上，MiniMax M2.1 相比于 M2 有了显著的提升，尤其是在多语言场景上，超过 Claude Sonnet 4.5 和 Gemini 3 Pro，并接近 Claude Opus 4.5。"

根据上面这段介绍，它的编程能力，超出或接近了国外旗舰模型。

这个模型已经上线了，现在就能用。那么，这篇文章正好测一下，官方的介绍是否准确，它的 Web 开发能力到底有没有变强。

至于价格，跟原来一样。但是，官方表示"响应速度显著提升，Token 消耗明显下降"，也算变相降价了。

M2.1 接入 Claude Code，我的参数如下。

五、

我这次选择的历史遗留项目是 wechat-format，一个 Web 应用，将 Markdown 文本转为微信公众号的样式。

上图左侧的文本框输入 Markdown 文本，右侧立刻显示自动渲染的结果，可以直接复制到微信公众号的编辑器。

它非常好用，大家可以去试试看。我的公众号现在就用它做排版，效果不错（下图）。

问题是，原作者六年前就放弃了，这个项目不再更新了。我看过源码，它用的是老版本的 Vue.js 和 CodeMirror 编辑器，没有任何文档和说明，还经过了编译工具的处理，注释都删掉了。

如果不熟悉它的技术栈，想要修改这些代码是很困难的，可能要投入大量时间。

那么废话少说，直接让 AI 上场，把这些代码交给 MiniMax M2.1 模型。

六、

接手老项目的第一步，是对项目进行一个总体的了解。

我首先会让 AI 生成项目概述。大家可以跟着一起做，跟我的结果相对照。

# 克隆代码库
$ git clone git@github.com:ruanyf/wechat-format.git

# 进入项目目录
$ cd wechat-format

# 启动 Claude Code
$ claude-minimax

上面的claude-minimax是我的自定义命令，用来在 Claude Code 里面调用 MiniMax 模型（参见教程）。

输入"生成这个仓库的概述"。

AI 很快就给出了详细说明，包括项目的总体介绍、核心功能、技术栈和文件结构（下图）。

有了总体了解以后，我会让 AI 解释主要脚本文件的代码。

【提示词】解释 index.html 文件的代码

它会给出代码结构和页面布局（上图），然后是 JS 脚本加载顺序和 Vue 应用逻辑，甚至包括了流程图（下图），这可是我没想到的。

做完这一步，代码库的大致情况应该就相当了解了，而 AI 花费的时间不到一分钟。

七、

既然这个模型号称有"多语言编程能力"，我就让它把项目语言从 JavaScript 改成 TypeScript。

对于很多老项目来说，这也是常见需求，难度不低。

它先制定了迁移计划，然后生成了 tsconfig.json 和 types.d.ts，并逐个将 JS 文件转为对应的 TS 文件（下图）。

修改完成后，它试着运行这个应用，发现有报错（下图），于是又逐个解决错误。

最终，迁移完成，它给出了任务总结（下图）。

我在浏览器运行这个应用，遇到了两个报错：CodeMirror 和 FuriganaMD 未定义。

我把报错信息提交给模型，它很快修改了代码，这次就顺利在浏览器跑起来了。

至此，这个多年前的 JavaScript 应用就成功改成了 TypeScript 应用，并且所有内部对象都有了完整的类型定义。

你还可以接着添加单元测试，这里就省略了。

八、

简单的测试就到此为止，我目前的 AI 编程大概就到这个程度，用 AI 来解释和修改代码。我也建议大家，以后遇到历史遗留代码，一律先交给 AI。

虽然这个测试比较简单，不足以考验 MiniMax M2.1 的能力上限，但如果人工来做上面这些事情，可能一个工作日还搞不定，但是它只需要十几分钟。

总体上，我对它的表现比较满意。大家都看到了，我的提示词很简单，就是一句话，但是它正确理解了意图，如果一次没有成功，最多再修改一两次就正确了。

而且，就像发布说明说的一样，它运行速度很快，思考过程和生成过程最多也就两三分钟，不像有的模型要等很久。

另外，不管什么操作，它都会给出详细的讲解和代码注释。

总之，就我测试的情况来看，这个模型的 Web 开发能力确实很不错，可以用于实际工作。

最后，说一点题外话。著名开发者 Simon Willison 最近说，评测大模型越来越困难，"我识别不出两个模型之间的实质性差异"，因为主流的新模型都已经足够强大，足以解决常见任务，只有不断升级评测的难度，才能测出它们的强弱。

这意味着，对于普通程序员的常见编程任务，不同模型不会构成重大差异，没必要迷信国外的旗舰模型，国产模型就很好用。

（完）

90% 的 React 初学者，都低估了 Props。
他们以为它只是“从父组件往子组件传点数据”。

但真正写过复杂组件、设计过通用组件的人都知道一句话：

Props 决定了一个组件“好不好用”，而不是“能不能用”。

这篇文章，我们不讲 API 清单、不背概念，
而是围绕 Props 系统的 5 个核心能力，一次性讲透 React 组件化的底层逻辑：

• Props 传递
• Props 解构
• 默认值（defaultProps / 默认参数）
• 类型校验（PropTypes）
• children 插槽机制（React 的核武器）

👉 看完你会明白：
React 真正厉害的不是 JSX，而是 Props 设计。

---

一、Props 的本质：组件的“对外接口”

先抛一个结论：

React 组件 ≈ 一个函数 + 一套 Props 接口

来看一个最简单的组件 👇

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>
}

使用时：

<Greeting name="白兰地" />

很多人到这里就停了，但问题是：

❓name 到底是什么？

答案是：

name 不是变量，是组件对外暴露的能力。

Props 本质上是：

• 父组件 👉 子组件的输入
• 组件作者 👉 使用者的约定

---

二、Props 解构：不是语法糖，而是“设计声明”

对比两种写法 👇

❌ 不推荐

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>
}

✅ 推荐

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>
}

为什么？

解构不是为了少写字，而是为了表达意图。

当你看到函数签名：

function Greeting({ name, message, showIcon }) {}

你立刻就知道：

• 这个组件“需要什么”
• 组件的“输入边界”在哪里

👉 好的组件，从函数签名就能读懂。

---

三、Props 默认值：组件“健壮性”的第一步

看这个组件 👇

function Greeting({ name, message }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>{message}</p>
    </div>
  )
}

如果使用者这么写：

<Greeting name="空瓶" />

会发生什么？

message === undefined

这时候就轮到 默认值 出场了。

---

方式一：defaultProps（经典）

Greeting.defaultProps = {
  message: 'Welcome!'
}

方式二：解构默认值（更推荐）

function Greeting({ name, message = 'Welcome!' }) {}

💡默认值不是兜底，而是组件设计的一部分。

它代表的是：

• “在你不配置的情况下”
• “组件应该表现成什么样”

---

四、Props 类型校验：组件的“自说明文档”

来看一段很多人忽略、但非常值钱的代码 👇

import PropTypes from 'prop-types'

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  message: PropTypes.string,
  showIcon: PropTypes.bool,
}

很多人会说：

“这不是可有可无吗？”

但在真实项目里，它解决的是：

• ❌ 参数传错没人发现
• ❌ 新人不知道组件怎么用
• ❌ 组件一多，全靠猜

---

🔍 PropTypes 的真正价值

不是防 bug，而是“降低理解成本”。

当你看到 propTypes，就等于看到一份说明书：

• 哪些 props 必须传？
• 哪些是可选？
• 类型是什么？

👉 一个没有 propTypes 的通用组件，本质上是“黑盒”。

---

五、children：React Props 系统的“王炸”

如果只能选一个 Props 机制，我会毫不犹豫选：

🧨 children

来看一个 Card 组件 👇

const Card = ({ children, className = '' }) => {
  return (
    <div className={`card ${className}`}>
      {children}
    </div>
  )
}

使用时：

<Card className="user-card">
  <h2>张三</h2>
  <p>高级前端工程师</p>
  <button>查看详情</button>
</Card>

这里发生了一件非常重要的事情：

组件不再关心“内容是什么”。

---

🧠 children 的设计哲学

组件负责“骨架”，使用者负责“填充”。

• Card 只负责：边框、阴影、间距
• children 决定：展示什么内容

这让组件具备了两个特性：

• ✅ 高度复用
• ✅ 永不过期

---

六、children + Props = 通用组件的终极形态

再看一个更高级的例子：Modal 👇

<Modal HeaderComponent={MyHeader} FooterComponent={MyFooter}>
  <p>这是一个弹窗</p>
  <p>你可以在这里显示任何 JSX</p>
</Modal>

Modal 的实现：

function Modal({ HeaderComponent, FooterComponent, children }) {
  return (
    <div>
      <HeaderComponent />
      {children}
      <FooterComponent />
    </div>
  )
}

这背后是一个非常高级的思想：

Props 不只是数据，也可以是组件。

---

七、请记住这 5 条 Props 设计铁律

🔥 如果你只能记住一段话，请记住这里

1. Props 是组件的“对外接口”，不是随便传的变量
2. 解构 Props，是在声明组件的能力边界
3. 默认值，决定组件的“基础体验”
4. 类型校验，让组件自带说明书
5. children，让组件从“可用”变成“好用”

---

八、写在最后

当你真正理解 Props 之后，你会发现：

• React 不只是 UI 库
• 它在教你如何设计 API
• 如何让别人“用得爽”

Props 写得好不好，决定了一个人 React 水平的上限。

给你一个下标从 0 开始的二维整数数组 events ，其中 events[i] = [startTimei, endTimei, valuei] 。第 i 个活动开始于 startTimei ，结束于 endTimei ，如果你参加这个活动，那么你可以得到价值 valuei 。你 最多 可以参加 两个时间不重叠 活动，使得它们的价值之和 最大 。

请你返回价值之和的 最大值 。

注意，活动的开始时间和结束时间是 包括 在活动时间内的，也就是说，你不能参加两个活动且它们之一的开始时间等于另一个活动的结束时间。更具体的，如果你参加一个活动，且结束时间为 t ，那么下一个活动必须在 t + 1 或之后的时间开始。

 

示例 1:

输入：events = [[1,3,2],[4,5,2],[2,4,3]]
输出：4
解释：选择绿色的活动 0 和 1 ，价值之和为 2 + 2 = 4 。

示例 2：

输入：events = [[1,3,2],[4,5,2],[1,5,5]]
输出：5
解释：选择活动 2 ，价值和为 5 。

示例 3：

输入：events = [[1,5,3],[1,5,1],[6,6,5]]
输出：8
解释：选择活动 0 和 2 ，价值之和为 3 + 5 = 8 。

 

提示：

• 2 <= events.length <= 105
• events[i].length == 3
• 1 <= startTimei <= endTimei <= 109
• 1 <= valuei <= 106