edwardwzw的博客

原创 浅谈 CDN

CDN 的全称是 Content Delivery Network，中文通常翻译为 “内容分发网络”。

原创 React 中的 HOC 和 Hooks

        在函数式组件主导的 React 项目中，高阶组件（HOC）并非首选推荐，更建议优先使用 Hooks来实现复用逻辑。核心原因是 HOC 存在固有的设计缺陷，而 Hooks 能更优雅、简洁地解决相同问题，同时避免 HOC 的痛点。        本章节我们将分别介绍二者，并重点体会 Hooks 在函数式组件项目中的优势。

原创 Vue 2 和 Vue 3 在依赖收集与更新机制上的差异

每个组件实例对应一个Watcher，组件内所有响应式数据的依赖都会被这个Watcher收集。当组件内任何响应式数据变化时，整个组件的render函数会重新执行，整个组件会重新渲染。，之后通过 diff 算法对比新旧虚拟 DOM 树，只更新变化的部分。未变化的数据，只有受变化数据影响的部分才会重新生成对应的虚拟 DOM 节点。

原创 传输层TCP 与 安全层SSL/TLS

三次握手只属于传输层的 TCP 协议，是建立可靠连接的前提，和 SSL/TLS（安全层）无关；SSL/TLS 是在 TCP 连接的基础上，额外增加的 “安全增强层”，它有自己独立的 “握手流程”，但不是三次握手；整个 HTTPS 的通信流程，是 “TCP 三次握手打底 → SSL/TLS 握手加安全 → HTTP 传输数据” 的层层依赖关系。

原创 vue3 具名插槽、作用域插槽

简单说：具名插槽：解决 "内容放哪里" 的问题（无数据传递）作用域插槽：解决 "用子组件的数据，按父组件的方式渲染" 的问题（有数据传递）作用域插槽可以同时是具名插槽（通过name属性命名），两者不是互斥的概念。

原创 v-model ，在 vue3和 vue2中的区别

Vue 3 的 v-model 设计更简洁、灵活，减少了配置成本，同时支持更复杂的双向绑定场景，是对 Vue 2 语法的重要改进。

原创 Vue3 中的 v-model 语法糖

本章节我们用 “从具体到一般” 的推演法，分析 Vue3 中 v-model 语法糖的基本原理，以便我们更好地应用和理解它。其实 Vue3 中，v-model="counter" 中，默认绑定的属性是 modelValue。现在我们修改这个属性，将 modelValue 改为 aaa：现在我们修改父组件中调用子组件的地方，对于带参数的 拆分后等价于：

原创 redux toolkit (RTK)

Redux Toolkit（简称 RTK）是 Redux 官方推出的工具集，旨在解决传统 Redux 开发中的一些痛点问题。

原创 useEffect 和 useLayoutEffect 的区别

上面的实例代码中，分别用二者进行测试。如果快速刷新页面，会发现 useEffect 会有闪烁现象。都是用于处理副作用的钩子函数，但它们的执行时机有所不同，这会影响到实际应用效果。在 React 中，

原创 React 高阶组件和渲染属性的区别是什么？

适合封装通用且固定的逻辑（如权限控制、数据请求、日志记录），尤其是需要批量增强多个组件时。适合逻辑需要在不同场景下灵活展示时，或避免 HOC 嵌套过深的问题。例：鼠标跟踪、窗口大小监听等与 UI 展示强相关的逻辑。随着 React Hooks（如。

原创 React 高阶组件

在 React 中，高阶组件（Higher-Order Component，简称 HOC）是一种高级技巧，用于复用组件逻辑。它是一个函数，接收一个组件作为参数，并返回一个新的增强组件。

原创 React 中，如何避免子组件不必要的重新渲染？

场景解决方案子组件 props 不变但仍重渲染React.memo传递的对象 / 数组 props 引用频繁变化useMemo缓存传递的回调函数引用频繁变化缓存组件树中部分区域频繁变化拆分组件，隔离变化深层组件受状态影响状态提升或状态管理库注意：性能优化有成本，建议先通过 React DevTools 的 “Profiler” 工具定位真正的性能瓶颈，再针对性优化，避免过度优化增加代码复杂度。

原创 react函数组件中 if判断注意事项

禁止在组件渲染阶段（函数组件顶层）直接调用状态更新函数，这会触发无限渲染循环。状态更新逻辑应该放在事件处理函数（如onClick）或副作用钩子（useEffect）中，以控制执行时机。

原创 七牛云域名配置与CNAME解析

本文主要讲述，在七牛云后台上传图片后，如何通过访问我们在阿里云服务器中绑定的域名，来访问七牛云中的图片。

原创 七牛云图片上传 前后端全过程

七牛云上传流程概述后端生成上传凭证：服务器端使用七牛云 SDK 生成上传凭证（uptoken）前端获取凭证：前端通过 API 向后端请求上传凭证前端上传图片：前端使用获取的凭证将图片上传到七牛云处理上传结果：七牛云返回上传结果，前端或后端处理结果

原创 微信小程序发布细节

无论执行 npm run dev 还是 npm run build 后运行的代码，只要点击预览后，扫的那个码都是开发版。无论执行 npm run dev 还是 npm run build 后运行的代码，只有且在【版本管理】—> 【开发版本】中选为体验版后扫码，才能称为体验版。A: 如果本次和上次提交的开发者，不是同一个人的话，就不会自动更新体验版，需要开发人员在微信小程序后台手动选为体验版，然后重新生成一个码；如果还是之前的开发者提交的，就不需要在后台操作生成新的码，用户端会自动更新体验版。

原创 JWT 与 token 的生成和解析

前面章节我们已经讨论了，其中有一个重要的环节就是后端token的生成。本章节我们将针对token生成的过程和原理逐一讲述。

原创 微信小程序-获取用户手机号

uniapp 提供了ivcodecodecodecodewx.login()codecode下面我们来分别看一下👇调用获取加密手机号数据（encryptedData 和 iv），并将 uni.login 生成的 code 发送给后端，以便后端生成 session_key 用来解密。：使用 session_key、encryptedData 和 iv 解密获取真实手机号。

原创 微信登录流程 前后端逻辑

2. 后端用 code 换取 OpenID、unionid 和 session_key （后端调用微信官方提供的。7. 根据 OpenID 获取用户信息或 session_key。后端返回 用户登录态Token 、OpenID 给前端。前端调用 wx.login() 获取 code。5. 前端在后续请求中携带 Token。6. 后端验证 Token 有效性，并。从 Token 中解析出 OpenID。根据 OpenID 生成 Token。

原创 宝塔面板中，配置 https协议

在前面的章节中，我们的接口 http://www.wenbaby.tech:8888/order/list 已经可以正常访问，但是这里面存在两个安全隐患：1.http协议；2.8888端口号暴露。本章节我们讲述：如何将我们的 http协议配置为https，并且将8888端口号代理到其默认端口443。

原创 Mybatis-plus 条件构造器 Wrapper

Wrapper 是 MyBatis-Plus 提供的 条件构造器工具类，用于构建复杂的数据库查询条件。它的作用是简化 SQL 条件构造，但它不能替代 Mapper 层。最终仍需通过 Mapper 接口的方法（如 selectList、selectOne 等）执行数据库操作。它不涉及 SQL 的执行逻辑（如连接数据库、设置参数、返回结果映射等），这些仍由 Mapper 层负责。

原创 配置域名、SSL证书

上一章我们讲了如何将后端项目部署到阿里云服务器，此时我们前端项目中已经可以通过阿里云的ip地址正常访问后端项目中的接口。但是，由于我们还没有买域名，我们依然不能通过域名来请求，并且我们的前端微信小程序只支持 https 协议的接口请求，而我们同样未支持https。所以我们接下来需要：买域名并绑定SSL证书。（域名注册） ---> 实名认证 ---> 域名解析 ---> 域名备案 --->---> 绑定SSL 证书（创建证书）相关入口备案流程。

原创 宝塔面板部署 springboot + mysql 项目

（初次需先执行 java -version 确认jdk是否安装成功）先进入上一步的jar包目录，然后执行。导入 sql 脚本文件。添加服务器本地数据库。

原创 阿里云服务器-宝塔面板安装【保姆级教程】

服务器买来第一步：【重置密码】！！重置完密码后【重启】

原创 React.memo 和 useMemo

React 中，通常父组件的某个state发生改变，会引起父组件的重新渲染（和其他state的重新计算），从而会导致子组件的重新渲染（和其他非相关属性的重新计算）问题一：如何避免因为某个state变化，导致父组件的中其他属性(state)的重新计算？useMemo如何避免因为父组件的重新渲染，导致子组件中非相关属性的重新计算？React.memo。

原创 认识 IO 流

字节输入流作用：以内存为基准，可以把磁盘文件中的数据以字节的形式读入到内存中去。

原创 Stream 流

终结方法：调用完成后，不会返回新的Stream了，没法继续使用流了。

原创 集合 Collection、Map

由于 set 无索引，所以不能用 list 遍历的第一种方法，以下三种方法和 list 后三种方法一样。

原创 泛型和包装类

这些基本数据类型并非引用类型，所以不能直接用作泛型参数。为了能让基本数据类型用于泛型，Java 提供了对应的包装类就是把基本数据类型的数据包装成对象的类型。

原创 主键索引和唯一索引的区别

主键索引和唯一索引在数据库中都用于保证数据的唯一性，但它们之间存在一些关键区别，下面从多个方面为你详细介绍：

原创 spring 依赖注入的好处

spring框架通过依赖注入，对象之间的依赖关系由 Spring 容器来管理，而不是在代码中硬编码。这意味着一个类不再需要自己创建和管理其依赖的对象，而是由 Spring 容器将依赖的对象注入到类中。

原创 chmod chown

原创 JDK JRE JVM 三者的关系

中 的 javac 编译器将 .java 文件编译为 .javac 字节码文件 （编译）运行程序，确保程序能够在不同平台上正确执行（实现跨平台）执行 .class 文件 （运行）

原创 nodejs 中间件

以上列举了一些常见的 Node.js 中间件类型及其对应的库。实际应用中，根据项目需求可能会选用更多特定功能的中间件，如速率限制、API 版本控制、请求验证（如校验 JSON Schema）、数据库连接管理、模板引擎支持等。Node.js 中间件通常是指用于 Web 应用开发框架（如 Express、Koa、Hapi、Fastify 等）中，对 HTTP 请求生命周期进行拦截、处理和传递的一系列可复用函数。

原创 redux-persist

【代码】redux-persist。

原创 微服务-7 Docker

容器是镜像的实例，仓库中存储着镜像。

原创 微服务-6 Gateway网关

此时浏览器访问 localhost:10010/user/list 后正常返回数据，说明网关已生效，其原理流程图如下：

原创 微服务-5 Feign

提供者：

原创 微服务-4 Nacos

服务列表：服务详情：

原创 微服务-3 Ribbon