矩形包围盒碰撞检测

最近在项目当中遇到一个需求,也是一个我们平常十分常见的操作,那就是框选操作,但是对于正常元素来说,我们只需要计算框选框是否包裹了当前的目标元素就可以知道当前元素是否选中,但是项目中的元素会存在旋转的情况,所以计算起来就会有些复杂了,所以就抽了些时间深入的了解了一下,也在这里记录记录

最终代码可见 转向包围盒(OBB) 这个在线示例

JavaScript 中 Promise 的实现

之前重新梳理了一下 JavaScript 中的 Promise 的相关内容,也算是又温习了一遍 Promise 相关知识点,本章当中我们就来看看关于 Promise 的最后一部分内容,也就是 Promise 的内部实现原理

参考了网上各路大神的实现方式,发现虽然实现方式各有不同,但是原理都是十分类似的,所以下面就让我们站在巨人的肩膀上来实现一个我们自己版本的 Promise,尽量做到浅显易懂

深入 useEffect

我们在之前的章节当中已经整体的梳理一遍 React 当中的几种状态逻辑复用的方式,从 MixinHOC,再到最后的 Hook,虽然 Hook 算是比较新的内容,但是它也已经渐渐开始变得普及起来

所以在本章当中,我们就来深入的了解一下 Hook 当中的 useEffect,主要参考的是官方 FAQ 当中的 如果我的 effect 的依赖频繁变化,我该怎么办?,更多详细内容可以参考文档

React 中的 Hook

我们在之前 React 中的 MixinReact 中的 HOC 的章节当中介绍了 MixinHOC 的相关内容,了解了它们大致的实现原理和使用方式,也知道了 HOC 的出现就是为了替代 Mixin,但是 HOC 也并非完美无缺,它其实也是存在着一些缺陷的,比如

  • HOC 需要在原组件上进行包裹或者嵌套,如果大量使用 HOC,将会产生非常多的嵌套,这让调试变得非常困难
  • HOC 可以劫持 props,在不遵守约定的情况下也可能造成冲突

所以在本章当中我们就来看看 React 中的 Hook 是如何同时解决 MixinHOC 所带来的问题的

React 中的 HOC

我们在之前的 React 中的 Mixin 章节当中介绍了一些 Mixin 的基本原理和它存在的一些问题,而且在之前我们也提到过,React 现在已经不再推荐使用 Mixin 来解决代码复用问题,因为 Mixin 带来的危害比他产生的价值还要巨大,推荐我们使用高阶组件来替代它,所以在本章当中我们就来深入的了解一下什么是高阶组件,它的实现方式和应用场景以及存在的一些问题

React 中的 Mixin

最近在复习到 React 高阶组件相关内容的时候,发现之前比较常见的 Mixin 已经差不多被废弃了,而 HOC 相关内容也渐渐的在被 Hook 所替代,只能感叹变化太快

所以在这里打算重新的从头梳理一下,将之前博客当中关于 React 的一些过时内容也删减整合一下,也算是重新的温习一下 React 当中的几种状态逻辑复用的方式,也就是 MixinHOCHook 它们几者的实现原理、使用方法、实际应用以及如何选择等内容

我们先从快要被抛弃的 Mixin 开始看起,不过内容不会介绍很多,毕竟现在使用的已经不是很多了

React-Redux 的实现

接上回 Redux 的实现,我们在之前的章节当中,从一个简单的示例开始一步一步推导出 Redux 的实现方式,但是之前我们也提到过,它其实跟 React 一点关系都没有,所以在本章当中我们会把 ReactRedux 结合起来,用 Redux 模式帮助我们来管理 React 的应用状态

React 查漏补缺

本章主要用于记录一些 React 相关知识点,因为最近在复习 React 相关内容,发现版本迭代了许多,废弃了很多 API,也添加了一些新的方法(比如生命周期钩子等),所以就简单的在这里汇总整理一下,也算是查漏补缺

Redux 的实现

最近在复习 React 的过程当中,在网上发现了一篇关于 Redux 手动实现方式的 系列文章,收益良多,所以打算在这里汇总整理一下,一方面加深一下对于 Redux 的理解,另一方面也方便以后可以经常回来温习温习,内容有所删减和补充,更多内容可以参考原文

TCP/IP 协议

在之前的章节当中,我们梳理了 HTTP 协议HTTPSHTTP/2HTTP/3 的一些相关内容,本章我们再来看看姑且算是最后一部分内容,也就是 TCP/IP 协议相关内容,因为这部分内容在平常的工作之中接触有限,所以在这里简单记录一下也就当做是扩展知识了,内容主要参考的是 图解 TCP/IP,更多相关内容可以参考 前端知识体系整理

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×