与科技生活

独立开发

Authenticator验证码管理器

https://blog.wdkang.com

最近 MCP 概念越演越火，其中 “Browser Tools MCP” 尤其吸引我——它能让 AI 直接操控浏览器，对页面进行实时调试，大幅提升前端开发和测试效率。

关于Browser Tools MCP Server

最近开发一个 React Native 项目时，遇到一个必须调用原生能力的需求，但苦于没有找到合适的开源库可用。无奈之下，我决定尝试使用 Expo Modules 手动集成原生代码。虽然一开始对原生开发并不熟悉，但得益于 Expo Modules 提供的简洁 API 和自动桥接机制，配合 AI 生成 Swift 代码，最终顺利实现了功能。

使用 Expo Modules 集成原生代码

最近在使用 Nuxt 3 构建 SSR 项目的过程中，踩了不少坑，也积累了不少对比 Next.js 的体会，趁热记录一下，希望能帮到准备入坑 Nuxt 的朋友。

Nuxt 项目总结

最近在 Vue3 项目中使用到了WangEditor富文本编辑器,将它封装成了一个 composable 的形式（Hook），方便在多个页面中按需调用。

Vue3 二次封装 WangEditor 富文本

作为一名前端开发者，当得知 Cursor 这款 AI 编程工具逐渐走红后，我决定亲自上手试试。本文将记录我使用 Cursor 的初体验、基本使用方法、实际开发中的表现，以及一些优缺点分析，供大家参考。

Cursor 初体验

记录一下AppleStore 发布流程和遇到的问题

Expo 打包发布到 Apple Store 记录

 在之前的独立开发中，用到了 Expo 开发 React Native 项目，可以不用部署环境，调试也更加方便，极大提升了开发效率，尤其适合快速原型开发和中小型项目

使用 Expo 开发 React Native

七月到了，给大家带来一波实用的 Mac 应用推荐。这次推荐的四款软件分别涉及电池管理、开发清理、终端体验和影音娱乐，覆盖工作与日常两个维度，希望对你有帮助！

24 年 7 月软件推荐

一次从零到一的独立开发实践，基于 React Native 打造的两步验证工具。

随着 AI 生成内容（AIGC）在图像领域的迅猛发展，Stable Diffusion 成为最具代表性的开源文生图模型之一。它不仅开源、可商用，还具备惊人的图像生成能力。

认识 Stable Diffusion：开源 AI 绘图的革命性工具

在现代前端开发流程中，实现持续集成与自动部署已成为提升效率的关键一环。本文将介绍如何使用 Jenkins 搭配 Gitee，实现一个前端项目从提交代码到自动部署上线的完整流程。

Jenkins配置前端项目自动部署

Next.js 是一个基于 React 的服务端渲染（SSR）和静态网站生成（SSG）框架，由 Vercel 团队维护。随着前端工程化的发展，越来越多的开发者选择使用 Next.js 构建高性能、易维护的 Web 应用。

 了解Next.js

又整理一波最近用得比较顺手的软件工具。这些软件有的提高效率，有的解决小痛点，还有的简直让我感叹“为什么我现在才知道它”。

23 年 8 月软件推荐

Vue 中的虚拟 DOM diff 算法采用了“双端 Diff”策略，这是相较 React 的全量对比算法（如 React 16 以前版本中的递归对比）的一种性能优化手段。双端 Diff 在处理子节点列表变更时，能够以更高效的方式减少节点的移动操作。

Vue 的双端 Diff 算法

在现代前端框架中，React 与 Vue 是两大主流代表。随着 React 18 和 Vue 3 的正式发布，两者都在性能优化、响应式模型、服务端渲染等方面做出了重大更新。本文将从多个维度详细对比 React 18 与 Vue 3。

React 18 与 Vue 3 对比

styled-components 是一个流行的 CSS-in-JS 库，能够让你以组件化的方式编写样式，提升开发效率和代码的可维护性。本文将详细介绍 styled-components 的使用方法。

如何在React中使用styled-components

React 是一个强大的 UI 库，但在构建复杂应用时，性能问题可能会悄悄出现。本文将系统性地总结 React 性能优化的常见手段和最佳实践，帮助你打造更加流畅高效的前端应用。

React 性能优化总结

在忙碌的工作与丰富的生活中，合适的软件能够大大提升我们的效率与使用体验。今天分享一些我常用的 Mac 应用，它们既适用于工作场景，也能提升日常生活的便捷性。希望你能从中发现一些实用工具！

10 月 Mac 软件分享

上篇文章中提到了 TypeScript 中的泛型，今天我们来详细介绍泛型。

详细了解 TypeScript 泛型

本文适合 JavaScript 开发者,对TypeScript类型系统进行详细介绍，通过简明的例子带你入门 TypeScript。

TypeScript 入门

React Native 是一个强大的跨平台开发框架，但也因为其复杂性和双平台支持，存在不少让开发者“抓狂”的坑。本文参考社区经验，结合亲身踩坑经历，整理出一份实用的避坑指南，希望对你有所帮助。

React-Native 踩坑

最近因为 React Native 开发舍弃了 Windows 换了 mac 电脑，。在适应新系统的过程中，发现了几款提升效率的神器，特此分享，帮助你更高效地开发和管理项目。

macOS 工具推荐

React Native 是由Facebook公司推出的一套基于 JavaScript 的跨平台移动开发框架，它让 Web 开发者也能开发出原生 iOS 和 Android App。

初识React-Nateive与跨平台开发

useEffect 是 React 中用于处理副作用的 Hook。虽然语法简单，但如果不了解它的运行机制和依赖规则，很容易踩坑。本文将深入解析 useEffect 的常见陷阱和如何正确使用它。

了解 React useEffect 的常见陷阱

在 React 开发中，useCallback 和 useMemo 是两个非常重要的性能优化 Hook。它们经常被用于避免不必要的渲染和函数重建。

详解 React useCallback 和 useMemo

Redux 是 React 生态中最经典的状态管理库之一，而 react-redux 是它与 React 的连接桥梁。本文将从基本概念到源码原理，帮助你真正弄懂 react-redux 的工作方式和使用方法。

学习 Redux 和 React-Redux

高阶组件（Higher-Order Component，简称 HOC）是 React 中一种复用组件逻辑的高级技巧。它本质上是一个函数，接收一个组件并返回一个新的组件

React高阶组件(HOC)的使用

在之前的文章中，我们提到了 React中的 useRef 和 useState。这些都是React Hooks。在 React 函数组件中，Hooks 是一种让你无需编写 class 就能使用状态等 React 特性的方式。

React Hooks 是什么？

在 React 中，useRef 和 useState 是两个常见的 Hook，它们都能用于保存组件状态或引用，但用途与特性截然不同。本文将从底层原理、使用场景、性能等多个角度对比讲解。

React 中的 useRef 与 useState

Promise 和 async/await 是现代开发中最常用的异步处理方案。本文将带你深入理解它们的原理、语法、常见坑与实战技巧。

彻底理解 Promise / async

原型和原型链是 JavaScript 中非常核心但也经常让人感到困惑的部分。本文将用通俗易懂的语言，带你一步一步搞清楚它们的本质，并配上图示加深理解。

带你搞懂 JavaScript 中的原型和原型链

一款改变我使用电脑方式的神器

Everything 文件搜索软件推荐

在现代 Web 系统中，如何实现安全、高效的身份认证机制是开发中非常重要的一环。本文将带你了解目前非常常见的一种认证方式：双 Token 登录机制（Access Token + Refresh Token），并结合图示与代码帮助你理解它的工作原理。

了解安全登录之双 Token 机制

在 Vue 项目开发中，组件之间的通信是一项必备技能。本文将为你梳理 Vue 中最常见的 6 种组件通信方式。

用法	作用	返回值类型
`useCallback(fn, deps)`	缓存函数	函数
`useMemo(() => fn, deps)`	缓存任意值（也可以是函数）	任意类型

场景	是否适合使用
子组件使用 `React.memo` + props 传函数	✅ `useCallback`
重计算代价高的表达式或函数	✅ `useMemo`
简单计算或函数定义	❌ 不需要

详解 React 的 useCallback 和 useMemo

一、useCallback：缓存函数引用

✅ 作用：避免子组件因为函数变化而重新渲染

示例：

搭配 React.memo 使用效果更佳：

二、useMemo：缓存计算结果

✅ 作用：避免不必要的重复计算

示例：

三、useCallback vs useMemo 的区别

四、总结：

wdkang