Yuan 的博客 | Reckless Blog

纯 CSS 实现带连接线的树形组件

Pure CSS to implement tree components with connecting lines.

最近收到了一个实现目录的需求，并且文件夹之间有特定连接线的样式。项目中是纯 CSS 实现，性能优秀，所以有了这篇作为分享的文章 details 和 summary 首先，你得了解 details 和 summary 的用法，天然地支持内容展开和收起。这里有一个 MDN 的例子 1 2 3 4 5 6 7 8 9 <details> <summary>...

Posted by Reckless on June 28, 2024

Prisma 的基本配置及使用

Basic configuration and use of Prisma.

同事介绍了目前比较潮流的 ORM 框架，这里简单介绍一下它的基本使用初始化一个 TypeScript 项目并将 Prisma CLI 作为开发依赖项添加到其中： 1 2 yarn init -y yarn add prisma typescript ts-node @types/node --save-dev 接下来初始化 TypeScript： 1 npx tsc --...

Posted by Reckless on June 10, 2024

React 中使用自定义 hooks

Using custom hooks in React

在 React 中，自定义 hooks（钩子）是一个非常强大的工具，允许你将组件逻辑提取到可重用的函数中。自定义 hooks 是通过使用 React 提供的基本 hooks（如 useState、useEffect 等）来构建的。下面是编写自定义 hooks 的流程确定 hooks 的功能首先，需要明确自定义 hooks 的功能需求和目的。清晰地定义 hooks 要实现的功能和业务逻...

Posted by Reckless on June 5, 2024

用 Slate React 定制自己的富文本编辑器

Customize your own rich text editor with slate react

官方文档传送门：Slate React Docs Slate 介绍 Slate 是一个完全可定制的框架，用于构建富文本编辑器。通过 Slate，你可以构建像 Medium、Dropbox Paper 或 Google Docs 那样丰富、直观的编辑器，这些编辑器正在成为网络应用程序的桌面工具，而你的代码库却不会陷入复杂的泥潭。它之所以能做到这一点，是因为它的所有逻辑都是通过一系...

Posted by Reckless on January 27, 2024

不知不觉 2024 了，先祝大家新年快乐

Happy new year!

2023 总结 2023 过得还行，起码在工作学习上没偷太多懒还算认真。五一，爸妈来了广州，给他们当个导游。也看了音乐节、演唱会。 2024 展望 study hard & work hard 2024 对于我个人而言还是充满挺多挑战的，新的环境、新的生活。逃离个人的舒适圈，也是对自己的一次洗礼。享受生活工作学习再忙也得抽空好好 chill 一下。...

Posted by Reckless on January 1, 2024

在 React 组件中抽离出相同的业务逻辑

Extract the same logic in React components

在 React 中，代码复用的最基本单位就是组件，但是如果组件中也出现了重复的代码，该怎么做呢？那么我们需要通过某种方式将代码中公共的部分抽取出来，这些公共的部分就被称之为横切关注点（Cross-Cutting Concerns）在 React 中，常见有两种方式来进行横切关注点的抽离：高阶组件（HOC） Render Props Render Props 实际上本...

Posted by Reckless on November 6, 2023

Docker 学习笔记

Docker study notes

在公司求助于同事才勉强看懂经理写的 Dockerfile，于是打算自己浅学一下🧐 理解 Docker 的基本概念 Docker 是一种开源平台和工具，用于轻松地创建、部署和运行应用程序和服务。它采用容器化技术，允许开发人员将应用程序及其依赖项打包到一个独立的容器中，从而实现了应用程序的可移植性、可伸缩性和快速部署。你也可以把它理解为一个轻量的虚拟机，它只虚拟你软件需要的运行环境。 ...

Posted by Reckless on October 28, 2023

利用 ORM 处理数据库

Use ORM to process databases.

什么是 ORM ORM(Object–relational mapping) 是一种编程技术和模式，用于将关系型数据库中的数据映射到对象导向编程语言中的对象，从而在应用程序中以面向对象的方式来处理数据库操作。它允许开发人员使用类和对象来表示数据库表和记录，而不需要直接编写 SQL 查询语句。ORM 系统负责将对象的操作转化为对数据库的操作，同时也负责将数据库中的数据转化为对象，提供了一种...

Posted by Reckless on October 14, 2023

在循环渲染下通过表达式自定义索引

Customize index by expression under loop rendering.

浅析工作中遇到的组件循环渲染问题需求背景通过一个字符串数组中动态渲染 Dropdown 组件，句子 be like: ["一个", "keyword", "的", "keyword", "keyword"]，渲染是需要将 keyword 替换为二次封装后的 DropdownBox 组件。看似很简单的一个需求，但遇到的问题就是 keyword 是有严格顺序的渲染，也就是说一个静态...

Posted by Reckless on October 9, 2023

关于「运气」一词的自我见解

Understand the value of luck in your life

“运气并非成就，是命运之手把我托举到所不配有的高度，让人飘然，让人晕眩，最终，让人诚惶诚恐。” ——罗翔规划 & 变化我是一个较为喜欢规划的人，无论是哪个方面，甚至对于未来的人生方向，多多少少会规划一些整体的架构，但至于细枝末节方面，则不会去深究太多，毕竟未来尚未确定，我们无法预测未来，规划赶不及变化，不然也是竹篮打水一场空。规划得过于细致注定物极必反，现实好比一...

Posted by Reckless on October 3, 2023

Reckless Blog