听起来高大上的控制反转(IOC)是什么?

大家好,我是前端西瓜哥。今天我们聊聊 IOC,很高大上的东西。

IOC,全称为 Inversion Of Control,即 控制反转

控制反转是面向对象编程中的一种设计原则,作用是降低各个模块之间的耦合度。

控制反转是思想,不是具体实现。

阅读更多

如何做前端性能优化?

大家好,我是前端西瓜哥,这次来看看如何做前端性能优化。

因为前端优化的方案非常多,本文不会太深入讲解,否则就篇幅太长了,主要还是让大家对大的脉络有一些认识。具体里面的小点以后我会另写文章讲解。

前端性能优化,主要分两个大方向:资源加载优化代码优化

阅读更多

协同编辑中使用的 OT 算法是什么?

大家好,我是前端西瓜哥,今天我们来聊聊 OT 算法是什么。

OT 的英文全称是 Operational transformation,是一种处理协同编辑的算法。

它常用于实现协同文档的底层算法,支持多个用户同时编辑文档,不会因为并发修改导致冲突,而使结果不一致或数据丢失。

阅读更多

搜索功能实现遇到的那些坑

大家好,我是前端西瓜哥,今天我们来聊聊搜索的一些坑。

搜索是一个比较常见的业务需求,但里面有些容易踩坑的地方,我们今天来聊一聊。

阅读更多

长列表优化:用 React 实现虚拟列表

大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。

虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样。

虚拟列表解决的长列表渲染大量节点导致的性能问题:

  1. 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿;

  2. 即使渲染好了,大量的节点也持续占用内存。列表项下的节点越多,就越耗费性能。

虚拟列表的实现分两种,一种是列表项高度固定的情况,另一种是列表项高度动态的情况。

阅读更多

React 性能调试好帮手:useWhyDidYouUpdate

大家好,我是前端西瓜哥。

最近在尝试优化 React 组件,使用了 React.memo() 去缓存组件的渲染结果。

但有一个问题,就是要使 React.memo() 的缓存生效,需要保持 props 对象的浅比较结果为 true。

所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop,让它们保持指向原来的内存对象。

在 props 少的时候还好,但一旦多了之后,我们就比较难通过肉眼确认是哪个 prop 导致缓存失效。

怎样才能够方便地知道 props 的哪个属性发生了改变呢?

你可以试试 useWhyDidYouUpate。

阅读更多

React.memo 如何使用?

大家好,我是前端西瓜哥。

最近做的新功能有性能问题,所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。

阅读更多

yarn link 是如何帮助开发者对 NPM 包进行 debug 的?

大家好,我是前端西瓜哥。最近在研究 React 源码,用到了 yarn link 命令来链接两个项目。

我对其底层原理产生了兴趣,所以写了这么一篇文章,希望能够通过故事的形式,来让大家理解 yarn link 的使用场景和用法。

另外 npm link 和 yarn link 的效果是相同的,下文就不提及 npm link 了。

阅读更多

在 React 中使用 Redux 的 4 种写法

Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新。

Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态。对于这种情况,如果通过 props 层层传递,代码会变得不可维护,这时候我们可以考虑使用 Redux 这类状态管理库。

阅读更多

img 元素和 background-image 属性的区别

img 是 HTML 元素,基本用法如下:

1
<img src="./img.jpg" alt="图片描述" />

background-image 则是一个 CSS 样式属性,用于设置元素的背景图片。

1
2
3
.bg {
background-image: url("./img.jpg");
}
阅读更多

稀土掘金这个平台有什么问题?

大家好,我是前端西瓜哥。今天说一说稀土掘金的一些问题。

稀土掘金是一个技术博客平台,是程序员发布自己的技术文章、分享知识的地方。

其中主要是前端的文章比较多,一是因为前端开发较多,二是前端技术发展迅速,非常多花里胡哨的东西,文章写不胜写。

阅读更多