johe_juejin

拖拽排序是前端的常见需求，特别是在管理系统或者编辑器里。 比如低代码编辑器就支持把组件拖到页面不同位置来添加组件、调整顺序： 那么拖拽排序是怎么实现的呢？ 首先我们分析下它...

这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。 monorepo可以使用lerna,也可以使用更简洁的yarn、pnpm,但是pnpm相对于...

微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的...

微前端实现沙箱的常用几种方式，有基于ifram的方式，通过diff方式实现，还可以通过代理(proxy)实现单实例和多实例沙箱...

假设 React 组件有这样一个状态： 我们这样修改了它的状态： 你觉得组件会重新渲染么？ 我们先在 class 组件里试一下： 渲染 state.a.b 的值，两秒以后修...

上回就已经承诺过大家，一定会出 HTTP 的系列文章，今天终于整理完成了。作为一个 web 开发，HTTP 几乎是天天要打交道的东西，但我发现大部分人对 HTTP 只是浅尝...

以下几个问题是我们在实际开发中经常会遇到的场景，下面用几个简单的示例代码来还原一下。 3.更新时会把每个组件的更新合并，每个组件只会触发一次更新的生命周期。 由于源码比较复...

useRef 返回一个可变的ref对象，其.current属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。 在组件...

用过 webpack 的都知道，webpack 的 sourcemap 配置是比较麻烦的，比如这两个配置的区别： eval-nosources-cheap-module-s...

由于手机屏幕尺寸不一样，分辨率不一样，或者需要考虑横竖屏的问题，或者考虑到移动端兼容性。这时候你也就不得不解决在不同手机上，不同情况下的展示效果，所以就需要一个开箱即用并且...

最近在做一个功能时需要用到类似思维导图的布局方式，为此查了一些资料和开源代码的实现，涨了一波图布局相关的知识。我想实现的功能实际上就是一个有向无环图（DAG，Direct ...

单一责任（single responsibility）等等。 纯函数不改变原始的输入值。避免无用的副作用 当然并不是要禁止一切的副作用，而是说我们需要在可控的范围内去发生。...

参考自cypress官方提供的博客：文章链接，博客提供了一个很好的例子帮助我们从Jest+React Testing Library到Cypress + cypress-r...

从React官方网站看测试概览。提到了两个比较重要的工具，一个是Jest、一个是React测试库。 Jest是一个JavaScript测试运行器。它允许你使用jsdom操作...

先说结论useCallback和useMemo都可缓存函数的引用或值，但是从更细的使用角度来说useCallback缓存函数的引用，useMemo缓存计算数据的值。 根据官...

作为一个前端，每个人应该对npm install这个命令应该非常熟悉了，尤其是对这个命令执行过程中命令窗口疯狂输出肯定印象深刻。我发现有的同学对安装包轻车熟路，但对包从哪里...