banner
innei

innei

写代码是因为爱,写到世界充满爱!
github
telegram
twitter

react

cover
cover
cover

一种在 Electron 和 Web 环境下显示原生及自定义菜单的通用方法

本文介绍一种可以在 Electron 应用中显示原生菜单,并且在非 Electron 环境(Web)下也可以显示自定义的上下文菜单的方法。通过封装一个通用组件和调用方法,在两套环境中交互统一。 调出原生菜单 在 Electron 中,默认情况下右键并不会弹出类似 Chrome…
cover

为什么是 RSC (二)

渐进式渲染 Important 渐进式渲染,或者称作流式渲染。这不是一个只能在 RSC 中可以享受到的特征,这种渲染模式和 Suspense、 renderToPipeableStream 或 renderToReadableStream 有关。 但是在 Next.js…
cover
cover
cover
cover

Shiki 性能优化 - 按需加载语法解析

Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki 众所周知,代码高亮库包含了众多的语言解析器,导致加载比较缓慢,并且加载太多无用的解析器造成大量流量浪费。 这一节我们来实现按需加载 Shiki 需要的语言解析器。 动态加载…
cover
cover
cover
cover

为什么是 RSC (一)

React 19 会正式引入 React Server Component (RSC) 的概念,Client Component 和 Server Component 从此将会正式分离。Next.js 从 13 版本就开始支持 Server Component。那么为什么是…
cover
cover
cover

2024 年,该如何写一个全面兼容的 NPM 库

最近,把 rc-modal 做成了一个库。写代码倒是不难,无非就是把原本的代码封装抽象一下。倒是发包,和作为使用者如何使用这个包难住了。 首先,我们知道现在一个 npm 包如果不做 ESM Pure 的话,你需要考虑兼容 CJS/ESM,node 老版本和新版本(吃不吃…
模块化的请求数据统一管理的构想
在一个复杂的业务场景下,一个页面中被拆分多个组件,或者是多个组件共同组成一个独立的模块而不受到其他模块的影响。如下图所示。 Copy {"type":"excalidraw","version":2,"source":"http://localhost:2323…
为什么我更推荐命令式 Modal
更新 24.3:已封装成组件库,欢迎大家来使用。 https://github.com/Innei/rc-modal Modal 模态对话框。 一个非常常见的组件。不管是 C 端还是 B 端都能看到它的身影。但是你真的会用它吗? 什么是声明式 Modal 组件库中一般都会内置这类…
超级组合!NestJS + tRPC 与CSR绝佳搭档React Query,开启全新开发时代!
最近在重写一个 NestJS 的项目,想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口,也没有任何响应类型。如果使用 tRPC 的话,不仅不用手写 API 还能做到 End-to-End Type-safe. tRPC 是什么 RPC…
cover
cover
cover

浅谈 NextJS RSC/SSR 中数据水合和持久化数据(二)

上回说道在 SSR 中如何用 React Query 实现数据水合。这期来谈谈如何用 Jotai 实现。 使用 Jotai 对数据的管理后期对数据的修改和对 UI 的反应也会更加方便。 改造 注入数据 在 layout.tsx 我们依然使用 queryClient 去获取数据…
使用 Jotai 抽离组件状态的经验
Jotai 是一个非常优秀的基于原子模型的 React 状态管理库。它采用自下而上的方法来构建全局 React 状态管理,通过组合原子来构建状态,并根据原子依赖关系优化渲染。这解决了 React 上下文的额外重新渲染问题,并消除了对 memoization 的需求。 使用…
cover
cover
cover
cover
cover

浅谈 NextJS RSC/SSR 中数据水合和持久化数据(一)

因为最近在重写一个个人站点,尝试了 NextJS 全新的 RSC 架构之后,也踩了很多坑。打算用此文记录一些实践。 在 SSR 架构中,如果请求数据在服务端,在转到 CSR 渲染时依赖 SSR 的数据时,必须要保证在 CSR 时拿到的数据和服务端一致,只有这样还能保证两端渲染一致…
React 应用中性能优化的经验(二)
上回说道在 React 应用中列表组件应该去优化,今天复杂组件应该怎么写。Jotai 和 Zustand 咕咕咕了,下次再说。 写过大厂屎山的大伙应该都经历过,一个组件能有上百甚至上千行都是常事。一个组件内部嵌套一个组件也是常事。简单总结了下三不要: 不要在 Component…
Ownership of this blog data is guaranteed by blockchain and smart contracts to the creator alone.