React 由于太过灵活,10 个人写能写出 10 种甚至 9 种写法(绝望)。俗话说乱写一时爽,维护火葬场(自己说的),因此这篇文章总结了我日常开发见到的各种不合理写法,和自己写出整洁代码的一些经验。
23 篇博文 含有标签「技术」
查看所有标签一些有助于管理前端项目目录的抽象概念
看过许多前端项目,可以说各种各样的目录结构都有。虽然这玩意没有一个标准答案,但是一个合理的目录结构确实会对项目开发和维护有很大帮助。
最近学习到了 bulletproof-react,发现还不错,但是感觉有一些地方不太合理,不能完全抄下来,需要结合实际情况使用。
因此我研究了下这个项目,提取出了一些抽象的概念,应该能帮助大家设计出合理的项目目录。
Electron 工程一个比较好的架构介绍
Electron 是一个跨平台桌面应用程序构建工具,你可以使用前端技术和 NodeJS 来构建桌面应用程序(MacOS、Windows、Linux),我们熟悉的 VSCode 就是使用它来构建的。
我在前段时间写了个跨平台哔哩哔哩视频下载工具,发现网上关于 Electron 的相关信息还是挺少的,因此我在这给大家分享一些我开发这个工具的一些经验。
当然,一篇文章肯定讲不完所有细节,所以这里只是简单介绍一下,以后有机会可能还会详细介绍各个细节。
一些 Electron 基本的概念在本文不再赘述,如果你还不清楚的话,可以到 Electron 官网进行学习
实现一个 React 可拖拽排序列表(全动画)
可拖拽(也叫可排序)列表是一个比较常见的组件,但是实际实现起来还是有一定复杂程度的,涉及到光标跟踪、元素交换动画,因此我自己研究了一下使用 React 的实现方法,现在分享给大家。
表达能力可能不太好,加上这个组件确实比较复杂,如果大家有不明白的地方欢迎在评论区里提问。
React useCallback & useMemo 实用技巧(性能优化)
这两个 API 概念比较简单,但是经常被误用(特别是 useCallback,经常能看到有人动不动就 useCallback),因此这里给大家分享一下这两个 API 的正确使用场景。
JavaScript Promise 的可“取消”技术
众所周知,在 JavaScript 中,Promise 一旦开始后就无法取消了,有时候我们确实需要一种可取消的 Promise。经过对几个比较知名的开源库研究,我学习到了一些 Promise 的“取消”(打上引号表示并不是真的取消了)技术,并分享给大家。
Ant Design 源码学习——Message(全局提示)篇
Ant Design 是一个很棒的 UI 库,里面有些组件确实值得学习一下。本篇为 Messge(全局提示)篇。
Ant Design 源码学习——Modal(对话框)篇
平常开发中经常使用到 Ant Design,确实是一个非常好用的 React UI 库,但是只会用不知道实现原理的话就很难有进步,因此我想翻翻源码学习一下部分组件的具体实现原理,顺便分享一下自己的心得给大家。
这个系列的文章不会写到所有的细节,只会写一些我认为比较关键和实现起来比较困难的点。
实现一个简单的 react-redux(原理学习)
最近对 react-redux 的实现原理感兴趣,翻看了下源码,发现原理比预想中的要简单,因此自己手动实现了一个简单的 react-redux,现在分享心得给大家作参考。
前端 React 不用第三方全局状态管理库,只用 Context API 的一种比较好的全局状态管理架构
前端 React 常见的状态管理库主要有大家耳熟能详的 Redux,还有 Meta(原 Facebook)新秀 Recoil。
但是有的时候,由于各种原因(团队不让、项目比较简单不想用、引入新包体积变大等),当我们不能使用任何第三方全局状态管理库时,仍然需要进行全局状态管理,这时候我们就可以考虑一下使用自带的 Context API 进行简单的全局状态管理。
这篇文章我主要是想给大家分享一下我在日常开发中使用的一种自认为比较优雅的 Context 架构,实现起来比较简单,但是个人认为非常实用。本文主要是使用 Hooks 写法来实现 Context 架构。