React Query 快速入门
很早之前就看到 React Query 在 前端 掘金圈子里火了一把，一直想学却因为种种原因没有开始。这一阵子闲下来了一些，快速学习了一下并且在自己的小项目里上手用了一番，体验非常不错。所以在这里以 React Query 为例写一篇 TanStack Query 小小的快速上手指南。 React Query TanStack Query (FKA React Query) is often described as the missi...
Valito React响应式状态库
本篇文章同时收录在公众号《泡芙玩编程》，持续更新内容中，欢迎关注 1.Valtio 是啥玩意 Valtio makes proxy state simple for React and Vanilla 就是让数据管理在 React 和原生 JS (Vanilla) 中变得更加简单的一个库，它类似于 Vue 的数据驱动视图的理念，使用外部状态代理去驱动 React 视图来更新。总的来说，Valtio（用粤语来念就是“我丢”） 是一个很轻量...
valtio使用方式
前言 跳过前言： ，您可以选择直接从第二节开始阅读。 提到 React 状态管理，我最初是接触的 Context，就是用 useContext 和 useReducer 去做状态管理，写多了发现还是挺麻烦的，还会出现 “Provider 嵌套地狱” 的问题，对于不同的 state 也不好组合计算。后面了解到 Redux，固有的模式使得用户需要编写很多重复和复杂的代码，甚至开发者也说了 “Try MobX”。对于 MobX，和前者的的函数...
iNtersectionobserver监听滚动条滚动位置实现图片懒加载
大家下午好。听说在实现一些需要监听滚动条滚动到某个元素需要执行某段神秘代码的需求时，大伙总是不太乐意，现给大家介绍一个不用监听滚动事件就能完成需求的api，希望能给一点点启发。 废话少说，先上效果 懒加载 瀑布流 视频暂停 上代码 HTML JS 完事，下次再见 啊？客官还要解释？那好吧 接下来就是隆重推出今天的主角 IntersectionObserver API，这是一套用来监听 html 元素是否与指定元素有 交叉关系 的API。...
Docker从入门到部署项目
Docker概念 是一个开源的应用容器引擎，它是基于 语言并遵从 协议开源。 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 机器上，也可以实现虚拟化。通过容器可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。并且它是完全使用沙箱机制，相互之间是隔离的，更重要的是容器性能开销极低。 Docker 作为轻量级虚拟化技术，拥有持续集成、版本...
JS进阶 | 详解ES6中的Class
「这是我参与2022首次更文挑战的第12天，活动详情查看： 」 JS进阶系列文章 👇 阅读本文你将学习到 👇 类中的构造函数 类的实例、静态、私有属性 类的实例、静态、私有方法 类的继承 关于 一些扩展知识点 在 （ ）之前， 语法中是不支持类的，导致面向对象编程方法无法直接使用，但我们可以通过function来实现模拟出类，而随着 的更新，在 出现了中出现 关键字，可以用于定义类。接下来让我们看看它的如何使用的。 class 下面...
this指向-箭头函数this指向详解
一、思考： 1.为什么不能使用箭头函数来定义methods？ 答：因为箭头函数没有自己的作用域，绑定的是父级作用域的上下文， 如果使用箭头函数，那么在获取data里面的数据的时候，this指向window导致访问失败 原因：这跟this的绑定规则有关，在箭头函数中不绑定this，但是如果箭头函数使用了this，会往上层作用域去找，注意：methods对象并不是作用域(所有的对象都没有作用域) 2.不使用箭头函数的情况下，this到底指向...
前端埋点重要环节：前端如何录制用户的操作过程
前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景 公司有很多的项目，但是并不是每一个项目都很重要，其实重要的项目就那么几个，上面也是很重视这几个项目，尤其是对一些生产问题的关注度很高。 这几天上面交代下来了，需要对这些项目做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程 注意点 想要完成这个需求，仔细想了一下，需要注意几个点： 跨框架使用： 这些项目有vue、...
JS长任务（耗时操作）导致页面卡顿，优化方案
前端是直接和客户交互的界面，前端的流畅性对于客户的体验和留存率至关重要，可以说，前端界面的流畅性是一款产品能不能成功的关键因素之一。要解决界面卡顿，首先我们先要知道造成页面卡顿的原因： 什么是长任务？ 长任务是指JS代码执行耗时超过50ms，能让用户感知到页面卡顿的代码执行流。 长任务为什么会造成页面卡顿？ UI界面的渲染由UI线程控制，UI线程和JS线程是互斥的，所以在执行JS代码时，UI线程无法工作，就表现出页面卡死状态。 我们现在...