摘要 当使用 Hook 特性编写组件的时候时候，总能感觉到它的简洁和方便。当然，「天下没有免费的午餐」，它存在内存泄漏风险（最后有提到）。但这并不妨碍探索它的魔力。 在正式开始前，希望您读过 Hook 的文档或者在项目使用过它。但如果只对函数编程感兴趣，也可能有所收获。 为了让行文更流畅，我打算先抛出几个问题，这些问题会在源码实现的过程中，逐步解决： 🤔️ useState 的...

本文介绍在工程中经常用到的 react-router 的技巧： 🤔️ 如何在 TypeScript 中使用？ 🤔️exact和strict的区别？ 🤔️ 如何封装路由配置组件？ 🤔️ 如何响应路由变化? 如何在 TypeScript 中使用？ 有时候会需要使用编程式导航，比如上方导航栏里面选项，响应按钮事件，进行路由跳转。react 的做法是通过高阶函数，函数体内部...

Keywords：堆栈、容器存储、Lazy Log、异步日志、缓存周期 概述 规范化的日志输出和存留，可以用来：开发调试、行为留存、程序状态记录。 对于日志，一般需要 4 个要素：时间、级别、位置、内容、上下文信息。对于集群或者多台机器来说，日志还需要区分不同机器的唯一标识。 基本原理：堆栈信息 自己封了个包，日志报错信息的格式为：<time> <level>...

Keywords: 操作系统差异、识别用户/编辑器操作、连续触发的优化、工程级 API。 概述 NodeJS 提供了 fs.watch / fs.watchFile 两种 API： fs.watch: 推荐，可以监听文件夹。基于操作系统。 fs.watchFile: 只能监听指定文件。并且通过轮询检测文件变化，不能响应实时反馈。 一个监听指定文件夹的代码如下： fs.w...

联合类型与交叉类型 联合类型：使用|作为标记，常用于对象类型是多种类型之一。 交叉类型：使用& 作为标记，创建新类型，拥有多个类型的所有定义。 interface Student { name: string; school: string; } interface People { name: string; age: number; } //...

最近在做运营侧中台项目的重构，目前的选型是 koa2+typescript。在实际生产中，切实体会到了 typescript 类型带来的好处。 为了更形象说明 typescript 的优势，还是先来看一个场景吧： BUG 现场 作为一门灵活度特别大的语言，坏处就是：复杂逻辑编写过程中，数据结构信息可能由于逻辑复杂、人员变更等情况而丢失，从而写出来的代码含有隐含错误。 比如这次我在给自...

游戏开发，尤其是微信小游戏开发，是最近几年比较热门的话题。 本次「云开发」公开课，将通过实战「在线对战五子棋」，一步步带领大家，在不借助后端的情况下，利用「小程序 ✖ 云开发」，独立完成一款微信小游戏的开发与上线。 项目概述 游戏开发，尤其是微信小游戏开发，是最近几年比较热门的话题。 本次「云开发」公开课，将通过实战「在线对战五子棋」，一步步带领大家，在不借助后端的情况下，利用「小程...

特效一览 🌊 波浪特效： 🕙 撞钟特效： ⏳ 沙漏特效： 🏃 追逐特效： 🌊 波浪特效 原理和代码 这里的动画效果是分成 2 个过程：上 => 下 => 回到上。其实这两个过程是相反的。可以使用动画属性alternate，在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。 div { width: 3.5em...

这是阅读《MongoDB 实战》所做的，关于索引、复制和分片方面的读书笔记。 索引与查询优化 查询是非常高频的操作，大数据、高频读的场景下，查询的效率会是性能的瓶颈。设置合适的索引，可以充分利用数据结构（B 数）和物理硬件的优势。 1. 索引理论 复合索引和分离索引 一个查询中，要是有多个字段，比如 2 个字段。分离索引是：查找每个索引的匹配集合，取得这些匹配集合的交集。复合索引...

特效一览 声音波纹： 弹性缩放： 旋转加载： 渐变点: 翻转纸片： 声音波纹特效 原理和代码 需要几个块，就准备几个空 dom 元素。当然，数量越多，动画越细腻，但同时维护成本也高。 <div> <span></span> <span></span> <span&g...