听起来高大上的控制反转(IOC)是什么?
大家好,我是前端西瓜哥。今天我们聊聊 IOC,很高大上的东西。
IOC,全称为 Inversion Of Control,即 控制反转。
控制反转是面向对象编程中的一种设计原则,作用是降低各个模块之间的耦合度。
控制反转是思想,不是具体实现。
大家好,我是前端西瓜哥。今天我们聊聊 IOC,很高大上的东西。
IOC,全称为 Inversion Of Control,即 控制反转。
控制反转是面向对象编程中的一种设计原则,作用是降低各个模块之间的耦合度。
控制反转是思想,不是具体实现。
大家好,我是前端西瓜哥,今天来做做 TS 类型体操。
大家好,我是前端西瓜哥,这次来看看如何做前端性能优化。
因为前端优化的方案非常多,本文不会太深入讲解,否则就篇幅太长了,主要还是让大家对大的脉络有一些认识。具体里面的小点以后我会另写文章讲解。
前端性能优化,主要分两个大方向:资源加载优化 和 代码优化。
大家好,我是前端西瓜哥,今天我们来聊聊 OT 算法是什么。
OT 的英文全称是 Operational transformation,是一种处理协同编辑的算法。
它常用于实现协同文档的底层算法,支持多个用户同时编辑文档,不会因为并发修改导致冲突,而使结果不一致或数据丢失。
大家好,我是前端西瓜哥,今天我们来聊聊搜索的一些坑。
搜索是一个比较常见的业务需求,但里面有些容易踩坑的地方,我们今天来聊一聊。
大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。
虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样。
虚拟列表解决的长列表渲染大量节点导致的性能问题:
一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿;
即使渲染好了,大量的节点也持续占用内存。列表项下的节点越多,就越耗费性能。
虚拟列表的实现分两种,一种是列表项高度固定的情况,另一种是列表项高度动态的情况。
大家好,我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。
大家好,我是前端西瓜哥。
最近在尝试优化 React 组件,使用了 React.memo() 去缓存组件的渲染结果。
但有一个问题,就是要使 React.memo() 的缓存生效,需要保持 props 对象的浅比较结果为 true。
所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop,让它们保持指向原来的内存对象。
在 props 少的时候还好,但一旦多了之后,我们就比较难通过肉眼确认是哪个 prop 导致缓存失效。
怎样才能够方便地知道 props 的哪个属性发生了改变呢?
你可以试试 useWhyDidYouUpate。
大家好,我是前端西瓜哥。
最近做的新功能有性能问题,所以我想尝试优化一下 React 组件的性能。下面我们来好好学习一下 React.memo 的用法。
大家好,我是前端西瓜哥。最近在研究 React 源码,用到了 yarn link 命令来链接两个项目。
我对其底层原理产生了兴趣,所以写了这么一篇文章,希望能够通过故事的形式,来让大家理解 yarn link 的使用场景和用法。
另外 npm link 和 yarn link 的效果是相同的,下文就不提及 npm link 了。
大家好,我是前端西瓜哥,今天来学习 React 中的列表渲染要加 key 的原因。
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情
最近公司的前端项目从 React 16 升级到了 React 17,导致 ahooks 的 useClickAway 不能按预期工作。
下面西瓜哥我就来说说到底发生了什么事。
Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新。
Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态。对于这种情况,如果通过 props 层层传递,代码会变得不可维护,这时候我们可以考虑使用 Redux 这类状态管理库。
img 是 HTML 元素,基本用法如下:
1 | <img src="./img.jpg" alt="图片描述" /> |
background-image 则是一个 CSS 样式属性,用于设置元素的背景图片。
1 | .bg { |
大家好,我是前端西瓜哥。今天说一说稀土掘金的一些问题。
稀土掘金是一个技术博客平台,是程序员发布自己的技术文章、分享知识的地方。
其中主要是前端的文章比较多,一是因为前端开发较多,二是前端技术发展迅速,非常多花里胡哨的东西,文章写不胜写。