【摘要】最近在将园子博客后台的前端框架从 angular 15 升级至 angular 19，这边博文记录的是迁移至 Standalone Component 的过程。之前尝试使用 angular 19 提供的迁移命令自动迁移，但迁移失败，改为手动迁移，记录一下迁移过程。阅读全文 ...继续阅读 (5)

【摘要】记录一下学习使用 ChildContent 的试验代码，用的是 Angular 19，AppComponent 是 parent component， SidebarComponent 是 child component，SidebarBlogCategoriesComponent 是 projected component，代码1：使用 ng-content 在 child component 中显示 projected component 的内容阅读全文 ...继续阅读 (8)

...继续阅读 (17)

toc阅读前你需要知道的为什么需要函数式的控制LoadingComponent要解决的问题实现设计思路代码tocstop阅读前你需要知道的#React Context是什么如何自定义Hooks为什么需要函数式的控制LoadingComponent#在APP的开发中，我们经常会遇到一些异步的操作，比如通过网络请求获取数据。在用户进行这类操作的时候，一般需要弹出一些提示的组件，用来表示这次网络请求所处的状态。最简单的实现方法是维护一个内部State，在网络请求的状态发生变化的时候，按照业务需求同步更新这个内部状态，并且根据这个状态来决定LoadingComponent是否渲染，代码示例如下12345678910111213141516171819constTestLoading= () => {const[isError, setIsError] =useState(false)consthandleRequest=async() => {try{awaitrequestAPI()setIsError(false)}catch(e){setIsError(ture)}}return(< />)}从上面的代码我们不难看出，如果使用和这种简单的实现方式，需要在每个需要展示LoadingComponent的页面， ...继续阅读 (23)

...继续阅读 (24)

Live-PhotoA simple live-photo component.Github:https://github.com/LynanBreeze/live-photoPreviewMy Style[This iframe content needs to be loaded by JavaScript.]html代码1Apple Style[This iframe content needs to be loaded by JavaScript.]html代码1OptionsKeyTypephotoSrcstring, requiredvideoSrcstring, requiredloopnullmutednulluseApplenullRun1pnpm install && pnpm run devBuild1pnpm build【还没写完】 ...继续阅读 (31)

在产品设计中，Ghost Component是一种在国外产品中使用比较多的设计风格，看起来比较轻量化和简洁。这篇文章，作者分享了他的一些思考，供各位参考。在UI设计中，这种风格的图标和组件也常被称为“Ghost Component”：使用细线条勾勒出图标或组件的轮廓，而内部保持透明或半透明。在设计系统和组件库中，这种风格的图标和组件通常会作为一个独立的系列或变体存在，以便设计师可以根据需要选择使用实心(Filled)或描边(Outlined)版本。值得注意的是，虽然这种设计风格最常见于图标，但也可以应用于其他UI组件，如按钮、卡片或输入框等。在这些情况下，组件名称可能会保持不变，但会添加”outline”或”bordered”等修饰词来区分不同的样式变体。Ghost Component背后的设计思考：视觉轻量化：透明的中间区域可以减少界面的视觉重量，让整体设计更加轻盈和简洁。这种设计可以降低用户的视觉负担，让界面看起来不那么拥挤。增强可读性：细描边可以清晰地定义UI元素的边界，同时透明的中间区域允许背景内容部分可见。这种设计可以在不完全遮挡底层内容的情况下，突出显示UI元素。层次感：透明的中间区域可以创造出层次感，让用户更容易理解界面的结构和元素之间的关系这种设计可以帮助用户更好地导航和理解界面布局。美观性：细描边配合透明中心可以创造 ...继续阅读 (28)

...继续阅读 (51)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-2 ...继续阅读 (48)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-1 ...继续阅读 (45)

在开发前端应用的时候，我比较推荐在真正开始写代码之前试着画一画组件树 / 状态树。在很多时候，可能你的设计师已经帮你做好了组件树，但在某些场景下，你的设计时并不会帮你拆解组件树，或者是你是直接和产品经理对接，他不会帮你拆解组件树。这个时候，相比于写代码，我更推荐你先拆解组件树，在完成组件树之后，再开始你的 Coding。Figma / Sketch 之类的软件提供的分组能力、图层的能力，可以帮助你将组件合理的拆解、分组、归类。当你完成树的建设之后，可以试试看将不同的模块拆解，每个模块是否可以独立正常的运转。如果不可以，则说明你的状态拆解的可能是有问题的。当你完成拆解之后，只需要按照你拆解出来的树组织你的 Component 即可。Thinking in Component Tree最先出现在白宦成。 ...继续阅读 (91)

如要阅读全文，点击标题跳转。go的validate库使用required时的零值问题。vue-element-admin多级路由component配置的一个坑。 ...继续阅读 (28)

...继续阅读 (65)

大家好，我卡颂。最近Next.js v14发布，发布会的各种梗图刷爆了国外前端社区。Next.js的诸多特性（比如Server Action、App Router），都是在RSC（React Server Component）基础上衍生出的。从名字可以看出，RSC是React的特性。那么，该怎么理解RSC和Next.js的关系呢？欢迎围观朋友圈、加入人类高质量前端交流群，带飞React团队的宿愿对于前端框架的开发范式，有三个重要衡量因素：用户体验维护成本性能但是，通常很难做到三者兼顾（具体原因本文不细究，感兴趣的同学可以看data-fetching-with-react-server-components。简单来说，在前端开发中，IO瓶颈是影响内容渲染速度的重要因素（可以简单理解为，前端需要等待请求返回数据后，再根据数据渲染内容，这期间延迟的时间就是IO瓶颈）。但是，前端框架能够掌控的范围局限在前端，所以无法对IO瓶颈做出极致优化，只能在三个因素中做出取舍（比如考虑用户体验与性能时，代码维护成本就高）。React团队为了同时兼顾三者，需要对服务端拥有更多掌控。这就是RSC诞生的初衷。但是，大部分React的受众只是把React当作前端view库，并不会直接使用RSC相关功能，所以React团队选择和Next.js团队合作，落地RSC。此时我们发现，React有三类受众：普通前端开发 ...继续阅读 (58)

在当今快节奏的数字世界中，网站性能对于吸引用户和取得成功至关重要。然而，对于像首页这样的页面，在不影响功能的前提下优化性能就成了一项挑战。这就是 Vue 组件懒加载的用武之地。通过将非必要元素的加载推迟到可见时进行，开发人员可以增强用户体验，同时确保登陆页面的快速加载。懒加载是一种优先加载关键内容，同时推迟加载次要元素的技术。这种方法不仅能缩短页面的初始加载时间，还能节约网络资源，从而使用户界面更轻量、反应更灵敏。在本文中，我将向你展示一种简单的机制，使用Intersection Observer API在 Vue 组件可见时对其进行懒加载。Intersection Observer APIIntersection Observer API 是一种功能强大的工具，它允许开发人员有效地跟踪和响应浏览器视口中元素可见性的变化。它提供了一种异步观察元素与其父元素之间或元素与视口之间交集的方法。它为检测元素何时可见或隐藏提供了性能优越的优化解决方案，减少了对低效滚动事件监听器的需求，使开发人员能够在必要时有选择地加载或操作内容，从而增强用户体验。它通常用于实现诸如无限滚动和图片懒加载等功能。异步组件Vue 3 提供了defineAsyncComponent，用于仅在需要时异步加载组件。它返回一个组件定义的 Promise：import { defineAsyncComponent } fr ...继续阅读 (68)

C4模型（Context, Container, Component, Code 模型）是一种用于软件系统的图形表示的框架。C4模型由 Simon Brown 提出，主要用来解决软件架构文档的各种问题。 ...继续阅读 (104)

...继续阅读 (58)

关于 @Configuration 注解有一个特别经典的面试题：@Configuration 和 @Component 有什么区别？无论小伙伴们之前是否背过相关的面试题，今天这篇文章学完之后相信大家对这个问题都会有更深一层的理解，废话不多少，咱们开始分析。1. 情景展现@Configuration 和 @Component 到底有何区别呢？我先通过如下一个案例，在不分析源码的情况下，小伙伴们先来直观感受一下这两个之间的区别。@Configuration public class JavaConfig01 { } @Component public class JavaConfig02 { }首先，分别向 Spring 容器中注入两个 Bean，JavaConfig01 和 JavaConfig02，其中，JavaConfig01 上添加的是 @Configuration 注解而 JavaConfig02 上添加的则是 @Component 注解。现在，在 XML 文件中配置包扫描：最后，加载 XML 配置文件，初始化容器：public class Demo { public static void main(String[] args) { ClassPathXmlApplicationContext ctx = new ClassPathXmlApplic ...继续阅读 (72)

1. IntroductionThe web form is necessary for a website. And there are 2 types of forms in AngularReactive forms: Provide direct, explicit access to the underlying form’s object model. Compared to template-driven forms, they are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, or you’re already using reactive patterns for building your application, use reactive forms.Template-driven forms: Rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to a ...继续阅读 (94)

1. IntroductionThat will be easy if we just want to simple to integrate the HTML layout into Angular, just create the header,center and footer component and put the corresponding HTML to each component will be ok, but, I don’t like it, because I think the well design structure is very important for a project, in my concept, I think there are at least two part layouts for a complete website, one is frontend for presentation and the other is backend for admin management. So we should need to support two difference layouts in this situation.By the way, for this article, I just want to demo ...继续阅读 (114)

This is post 6 of 6 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreCreate Angular Project and Communicate with .Net CoreTitle: Create Angular Project and Communicate with .Net CoreWe have created the ...继续阅读 (101)

在我们的 ecs 模块中，有一个重要的内部数据结构是 eid 的数组。它是 Component 结构的一部分，表示每个 Component 属于哪个 Entity 。目前，它是以一个有序的 id 数组实现的。这个数据结构常见的操作分别是：遍历、随机访问、查找 id 所在的位置。一个有序数组可以很好的完成任务。O(1) 的随机访问时间，O(Log N) 的查找时间。我们的 Entity ID 是 48bit 的，我觉得保存 48 或 64bit 的 id 数组有点浪费，且空间越大，实际操作效率也会相应降低。实际上，Entity 的个数不会太多，我觉得限制在 2^24 (一千六百万左右）足够了，所以用了一个间接索引，保存 24bit id ，再用它去索引真正的 entity id 。三个字节保存内部 id 听起来有点别扭，因为内存访问没有对齐。但是 4 字节又略显浪费，2 字节我担心不够用。所以，在上个月时，尝试做了一点优化：将数据按固定 32 (或至多256) 个元素分组。每组 64bits header + 32 * 8bits 。header 保存第一个元素的高 40bits ，后面是每个元素的低 8bits 。每组分为三个区段: 1. 高位相同 2. 高位+1 3. 其它离散数据。header 中用 2 bytes 保存 1,2 区段个数。用 16bits 保存离散数据的 of ...继续阅读 (140)

那我们又如何来开发一个Component呢？其实很简单，只要我们把一个类从System.ComponentModel.Component（下面简写Component）继承下来即可。2、Component是贴在容器Container上的，而Control则是贴在Windows Form或者Web Form上的。把 ClassLibrary4.dll文件拖动红色的地址，这样上面的组件就可以在这个工程里使用了。这些属性，就是在类库代码里的设置，有一些可见，并能设置，有一些只能可见不能设置，有一些不可见。 ...继续阅读 (76)

...继续阅读 (41)

大家好，我卡颂。React的代码量可以说是相当庞大。在如此庞大的库中是否存在文档中未提及，但是实际存在的功能呢？答案是肯定的。本文将向你介绍3个文档中未提及的隐藏彩蛋功能。欢迎加入人类高质量前端交流群，带飞ref cleanup在当前React中，Ref存在两种数据结构：(instance: T) => void{current: T}对于大部分需求，我们会使用第二种数据结构。同时，他也是useRef、createRef返回的数据结构。第一种数据结构主要用于DOM监控，比如在下面的例子中，div的尺寸会反映到height状态中：function MeasureExample() { const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node !== null) { setHeight(node.getBoundingClientRect().height); } }, []); return (Hello 卡颂); }但在上面的例子中，DOM的尺寸变化无法实时反映到height状态。为了反映实时变化，需要使用监控DOM的原生API，比如：ResizeObserver，监控DOM尺寸变化IntersectionOb ...继续阅读 (41)

QuestionYou have a graph ofnnodes. You are given an integernand an arrayedgeswhereedges[i] = [ai, bi]indicates that there is an edge betweenaiandbiin the graph.Returnthe number of connected components in the graph.AlgorithmTypical question we could utilize union find.At first, we let count = n, where all the nodes represent a tree(component), and then by doing union we could put connected nodes into same group(tree) and count minus one. Finally when all the nodes are union, the count number is the component number, in other words, the disconnected set(tree) number.CodeclassSolution{int[]parent ...继续阅读 (9)

ECS 中，同一个 Entity 是否可以由多个同类型的 Component 构成？在 Unity 中，答案是可以。我们的引擎在设计之初也是可以的。当时有一个问题：在 Lua 中，如何访问同类型的 Component ？如果有多个同类 Component ，最自然的方式是把它们放在一个数组里。但是、绝大多数情况下我们用不上这个特性，每次访问 Component 都加一次 [1] 或 [0] 的数组索引显得画蛇添足。若单个 Component 不用数组，多个才用数组，写起来又有极大的心智负担。因为这样做，它们就成了两个不同的类型。后来，我们干脆利用 Lua 的特性，把数组和 Component 本身放在一个 table 中。如果有多个 Component 就把这个数组直接放在第一个 Component 的 table 内。就这样用了一段时间后，最后还是受不了这个脏技巧。等到用 C 编写luaecs后，就砍掉了这个特性。ECS 不是万能灵药。如果需要让相同的 Component 聚合在一起，那么就使用额外的数据结构，或是不只使用一个 world 。这是我们目前实践给出的答案。去年在luaecs 的 issue 9也讨论过类似问题。最近，我们在不同的地方又碰到类似的问题。我觉得这个问题的本质是，ECS 虽然提供了一个高效的、不同于 OOP 中的对象的数据模型，但它对数据结构的实现有很大 ...继续阅读 (111)

2023-02-07 更此文内容已过时，目前更推荐参考：https://github.com/alan2207/bulletproof-reacthttps://juejin.cn/post/7095980489160261639React 在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范。文件类型介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能。component组件文件page如果有路由(React Router、NextJS 等)，则有页面文件util需要复用的工具函数helper一段特定逻辑，不是通用工具，可复用也可仅作为代码拆分片段hook自定义 React Hookconstant定义常量，大写+下划线命名CONSTANT_VALUE处理 index 文件在做组件或者页面的时候，你可能会划分组件，并把主组件用index.tsx导出。这样做的时候有一个好处就是可以按照文件夹名引入，从结构上看是很清晰的。但是事实上，在编辑器中会有多个index.tsx文件，开发时需要看文件所在的文件夹，非常难受。我的解决方案是，你的主组件应该和原来一样导出，index.ts文件二次导出主组件。你的index.ts应该这样写：export * from './MainComponent'; export { default } ...继续阅读 (11)

How to work around rustup-init failure(Jin Qing's Column, Mar., 2022)rustup-init.exe may fail if some anti-virus software is running with realtime protection.The error message is like this after many retries:error: could not rename component file from 'C:\.../rust/html' to 'C:\.../rust/html'See: https://github.com/rust-lang/rustup/issues/1912And it is not possible to stop the anti-virus for a corporate laptop.There is a way to workaround this. Here are the steps:Runrustup-inituntil it begins to retry renamingKill rustup-init when it is retryingrustupwill be installed before the failuredo not l ...继续阅读 (26)

【摘要】方法一： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export functi阅读全文 ...继续阅读 (82)