- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈前端精选
组件库设计实战 - 复杂组件设计
这里我们提出一个组件复杂度的概念，一个组件复杂度的主要来源就是其自身的状态，即组件自身需要维护多少个不依赖于外部输入的状态。 在明确了这点后，我们就可以设计轮播组件的基础 DOM 结构为： <Frame> <SlideList> <SlideItem /> ... 至此，组件库设计实战系列文章也将告一段落。 在全部四篇文章中，我们分别讨论了组件库架构，组件分类，文档组织，国际化以及复杂组件设计这几个核心的话题，因笔者能力所限，其中自然有许多不足之处，烦请各位谅解。 组件库作为提升前端团队工作效率的重中之重，花再多时间去研究它都不为过。再加上与设计团队对接，形成设计语言，与后端团队对接，统一数据结构，组件库也可以说是前端工程师在拓展自身工作领域上的必经之路。
1.3K10发布于 2019-09-29 - 来自专栏狮乐园
高级 Vue 组件模式 (9)
09 使用 Functional 组件 目标 到此为止，我们的 toggle 组件已经足够强大以及好用了，因此这篇文章不会再为它增加新的特性。 这听起来似乎有些耳熟啊，没错，它们就是在上一篇文章中所提及的木偶组件（Dump Component）。在 Vue 中，这种类型的组件也可以叫做函数式组件（Functional Component）。 实现 ToggleStatus 组件 接下来实现今天的主角，ToggleStatus 组件，由于我们的目标是将原先的二个函数式组件合二为一，因此这个组件本身应当也是一个函数式组件，不过我们需要使用另外一种写法 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-9 总结 关于函数式组件，我是在 React 中第一次接触，其形式和它的名字一样，就是一个函数 这种组件和普通组件相比的优势主要在于，它是无状态的，这意味着它的可测试性和可读性更好，同时一些情况下，渲染开销也更小。
86310发布于 2020-01-21 - 来自专栏分享/效率/工具/软件
9. 使用 kuboard 创建组件
9. 使用 kuboard 创建组件 视屏地址: https://www.bilibili.com/video/BV1gf4y1S79B/ 详情介绍: 现在已经搭建好了一个 k8s 集群, 目前一主一从 现在不方便说话
77920发布于 2020-04-22 - 来自专栏易帜的Android 学习之旅
9.Flutter学习之Wrap组件
Wrap组件可以实现流布局，单行的Wrap跟Row表现几乎一样，单列的Wrap变现与Column一致，但是Row与Column都是单行单列的，Wrap不一样，mainAxis(主轴)上控件不足时，则向crossAxis 火影忍者'), MyButton('火影忍者'), MyButton('火影忍者'), ], ), ); } } //自定义组件
64620编辑于 2022-02-09 - 来自专栏高级前端面试笔记
React组件设计模式-纯组件，函数组件，高阶组件
一、组件(1) 函数组件如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。 <1> 当组件是独立的，组件在页面中的个数为1或2的，组件有很多props、state，并且当中还有些是数组和对象的，组件需要每次都渲染的，使用Component<2> 当组件经常作为子组件，作为列表， React 的组合特性而形成的设计模式。 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。（组件是 React 中代码复用的基本单元。） 但是，当你将 HOC 应用于组件时，原始组件将使用容器组件进行包装。这意味着新组件没有原始组件的任何静态方法。
3.4K20编辑于 2022-10-18 - 来自专栏C++核心准则原文翻译
自学鸿蒙应用开发（9）- TimePicker组件
本文介绍在鸿蒙应用中TimePicker组件的基本用法。 增加TimePicker组件 如下代码中46行~52行所示，在布局中增加TimePicker组件。 <? "0vp" ohos:weight="5" ohos:width="match_parent" /> </DirectionalLayout> 代码中组件 在代码中使用TimePicker组件 如下面代码中21行~49行所示，在获取TimePicker组件后，一方面在button的动作响应中计算所选时刻和当前时刻的秒数差之后用小窗口表示出来；另一方面在用户操作 TimePicker时将选择结果表示在TextFile组件上。 intent); super.setUIContent(ResourceTable.Layout_ability_component); //获取textfield输入组件
67120发布于 2021-01-13 - 来自专栏痴者工良
浅入Kubernetes(9)：了解组件
而前面在搭建集群时，也学到了 master、worker 节点；第一篇第二篇中也提前介绍了一些 k8s 的概念，这篇将会对这些 k8s 中关键的组件或结构组成进行讲述。 【图来源：kubernetes官方文档】 Master 在前面两个图中，可以看到 Master 是由一组称为控制平面组件组成的，我们可以打开 /etc/kubernetes/manifests/ 目录， 里面是 k8s 默认的控制平面组件。 kube-apiserver kube-apiserver 是 k8s 主要进程之一，apiserver 组件公开了 Kubernetes API ，apiserver 是 Kubernetes 控制面的前端 kube-apiserver 这些称为 控制平面组件，而 kubelet、kube-proxy 则称为 节点组件。
79150发布于 2021-04-26 - 来自专栏高级前端面试笔记
React组件设计模式之-纯组件，函数组件，高阶组件
一、组件(1) 函数组件如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。 <1> 当组件是独立的，组件在页面中的个数为1或2的，组件有很多props、state，并且当中还有些是数组和对象的，组件需要每次都渲染的，使用Component<2> 当组件经常作为子组件，作为列表， React 的组合特性而形成的设计模式。 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。（组件是 React 中代码复用的基本单元。） 但是，当你将 HOC 应用于组件时，原始组件将使用容器组件进行包装。这意味着新组件没有原始组件的任何静态方法。
3.2K30编辑于 2022-12-07 - 来自专栏Web前端
React 表格组件设计
在现代 Web 开发中，表格组件是不可或缺的一部分，用于展示数据列表、统计信息等。React 作为一个流行的前端框架，提供了丰富的工具和库来构建高效的表格组件。 本文将从浅到深地介绍 React 表格组件的设计，包括常见问题、易错点及如何避免，并通过代码示例来帮助理解这些概念。1. 基本表格组件1.1 常见问题与易错点性能问题：表格组件在处理大量数据时容易出现性能瓶颈。样式问题：表格的样式需要统一且美观。响应式设计：表格需要在不同设备上显示良好。 响应式布局：使用媒体查询或 CSS 框架提供的响应式类来实现响应式设计。1.3 代码示例import React from 'react';import '. 通过本文的介绍，希望读者能够对 React 表格组件的设计有一个全面的了解，并在实际开发中合理应用这些设计原则，避免常见的错误和陷阱。
2.2K10编辑于 2024-11-13 - 来自专栏Super 前端
JavaScript组件设计思想
当然，这里说的是在程序设计方面。自己觉的很有道理，但是体会不是很深。 随即，我们组织了分享讨论会，让匡哥讲述其重构过程中的设计思路。 我陷入了沉思~~~ 现在，大前端流行组件化、模块化。然而，我们的模块又该如何设计实现呢？ 下面的实例，参考自【javascript组件开发方式】【GitHub示例地址】 ? ，当我们需要做一套组件。 首先的问题就是，这种写法太灵活了，写单个组件还可以。如果我们需要做一套风格相近的组件，而且是多个人同时在写。那真的是噩梦。 5.
1.2K51发布于 2019-08-15 - 来自专栏一Li小麦
组件设计基础（2）
组件生命周期 早期的react设计了许多的生命周期钩子。 •确定每个组件是否依赖于状态？ •找到共同的父级组件(所有需要状态子组件的共同祖先)。 •常见的组件所有者或另一个更高层次结构的组件。 设想一下，在一个应用中，包含三级或者三级以上的组件结构，顶层的祖父级组件想要传递一个数据给最低层的子组件，用prop的方式，就只能通过父组件中转。 中间那一层父组件根本用不上这个prop，但是依然需要支持这个prop，扮演好搬运工的角色，只因为子组件用得上，这明显违反了低耦合的设计要求。在flux和redux中我们会探讨如何解决这样的困局。 组件设计方法论 一些指导性原则： •组件尽可能通过props通信。不用context •组件属性需要有默认值，做好类型检查 •组件属性尽可能使用简单值。避免使用对象。
94350发布于 2019-12-04 - 来自专栏一Li小麦
组件设计基础（1）
设计易于维护的组件 单一职责原则在react组件设计中依然管用，尤其是维护一个大型的页面时。但也不是事无巨细都需要拆分。根据所谓"高内聚低耦合"的思想，逻辑紧密的组件是不适合拆分的。 react的组件基础，应当时时复习。必要时自己写一写。 react的组件 在react中组件有很多种方法，es5下createClass在React16以后的版本全部废弃。 ） 在维护一个拥有众多子组件的页面时，也许有些组件跟你当前的功能八杆子打不着。 每个React组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop来和组件对话的。 既然prop是组件的对外接口，那么就应该有某种方式让组件声明自己的接口规范。 prop和state的差异 •prop用于定义外部接口，state用于记录内部状态；•prop的赋值在外部世界使用组件时，state的赋值在组件内部；•组件不应该改变prop的值，而state存在的目的就是让组件来改变的
69440发布于 2019-12-04 - 来自专栏JavaEdge
Tomcat组件化设计
Tomcat提供一堆积木，怎么搭建这些积木你决定，你可根据需要灵活选择组件搭建你的Web容器，并且可自定义组件。 2 Web容器如何实现这种组件化设计？ 无论哪种方式，在实例化类前，Web容器需把组件类加载到JVM，这涉及类加载，Web容器设计自己的类加载器。 Spring也是通过反射机制来动态地实例化Bean，那么它用到的类加载器哪来的？ Spring也采用类似设计，Spring给Bean生命周期状态提供“扩展点”。 JDK也有这种设计，如Java集合的AbstractSet、AbstractMap。 Java 8开始允许接口有default方法，开始可以把抽象骨架类的通用逻辑放到接口。 6 总结 Web容器为了支持这种组件化设计，遵循了一些规范，比如面向接口编程，用“管理者”去组装这些组件，用反射的方式动态的创建组件、统一管理组件的生命周期，并且给组件生命状态的变化提供了扩展点，组件的具体实现一般遵循骨架抽象类和模板模式
55830编辑于 2022-12-13 - 来自专栏前端小馆
浅谈 React 组件设计
前面讲了几种 jQuery 插件的设计模式，其实万变不离其宗，不管是 jQuery 还是 React，组件设计思想都是一样的。 个人觉得，组件设计应该遵循以下几个原则： 适当的组件粒度：一个组件尽量只做一件事。 复用相同部分：尽量复用不同组件相同的部分。 松耦合：组件不应当依赖另一个组件。 我们不妨转换一下思路，当设计一个通用组件的时候，一定要只有一个组件吗？一定要把数据传给组件吗？ 那么来一起看看业界知名的组件库 Ant Design 是如何设计 Tabs 组件的。 总结 组件设计是一项重要的工作，好的组件我们直接拿来复用可以大大提高效率，不好的组件只会增加我们的复杂度。 在组件设计的学习中，你需要多探索、实践，多去参考社区知名的组件库，比如 Ant Design、Element UI、iview 等等，去思考他们为什么会这样设计，有没有更好的设计？
1.5K10编辑于 2022-05-09 - 来自专栏程序员成长指北
前端组件设计原则
译者：@没有好名字了 译文：https://github.com/lightningminers/article/issues/36，https://juejin.im/post/5c49cff56fb9a049bd42a90f Andrew Dinihan 原文：https://engineering.carsguide.com.au/front-end-component-design-principles-55c5963998c9 虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。 对于已经掌握基本的组件设计并且想要提高自身的组件设计能力的开发者，我认为以下 8 项是我认为值得去注意的，当然这并不是组件设计的全部。 虽然 OOP 类设计和前端组件设计差异很大，但是通过图解辅助设计的方法值得参考。
2.3K20发布于 2020-10-10 - 来自专栏漫画前端
前端组件设计原则
虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。 对于已经掌握基本的组件设计并且想要提高自身的组件设计能力的开发者，我认为以下 8 � 项是我认为值得去注意的，当然这并不是组件设计的全部。 虽然 OOP 类设计和前端组件设计差异很大，但是通过图解辅助设计的方法值得参考。 如果不是要设计需要服务于特定的一次性场景的组件，那么设计组件的最终目标是让它与父组件松散耦合，呈现更好的复用性，而不是受限于特定的上下文环境。 此外，组件规划和设计的概念也适用于组件重构。
1.6K20发布于 2020-12-16 - 来自专栏各类技术文章~
浅谈 React 组件设计
前面讲了几种 jQuery 插件的设计模式，其实万变不离其宗，不管是 jQuery 还是 React，组件设计思想都是一样的。 个人觉得，组件设计应该遵循以下几个原则： 适当的组件粒度：一个组件尽量只做一件事。 复用相同部分：尽量复用不同组件相同的部分。 松耦合：组件不应当依赖另一个组件。 我们不妨转换一下思路，当设计一个通用组件的时候，一定要只有一个组件吗？一定要把数据传给组件吗？ 那么来一起看看业界知名的组件库 Ant Design 是如何设计 Tabs 组件的。 总结 组件设计是一项重要的工作，好的组件我们直接拿来复用可以大大提高效率，不好的组件只会增加我们的复杂度。 在组件设计的学习中，你需要多探索、实践，多去参考社区知名的组件库，比如 Ant Design、Element UI、iview 等等，去思考他们为什么会这样设计，有没有更好的设计？
1K20发布于 2021-10-22 - 来自专栏code秘密花园
前端组件设计原则
译者：@没有好名字了 译文：https://github.com/lightningminers/article/issues/36，https://juejin.im/post/5c49cff56fb9a049bd42a90f Andrew Dinihan 原文：https://engineering.carsguide.com.au/front-end-component-design-principles-55c5963998c9 虽然在两种不同的前端框架之间进行切换确实需要学习很多，但是二者之间在很多基础概念、设计思路上是相通的。其中之一就是组件设计，包括组件层次结构设计以及组件各自的职责划分。 对于已经掌握基本的组件设计并且想要提高自身的组件设计能力的开发者，我认为以下 8 项是我认为值得去注意的，当然这并不是组件设计的全部。 虽然 OOP 类设计和前端组件设计差异很大，但是通过图解辅助设计的方法值得参考。
3K30发布于 2020-08-31 - 来自专栏前端达人
你的React组件为什么总是能跑就行？这9种设计模式，能让你的组件从能用到好用
今天，我要拆解9种React架构模式的核心秘密。这不是什么新概念炒冷饭，而是经过无数大厂项目验证的设计哲学。掌握它们，你的组件将从"勉强能用"进化到"无懈可击"。 模式三：复合组件——React组件设计的"终极奥义" 为什么这是最容易被误解的模式？ 很多人以为复合组件就是"组件嵌套"，实际上这是一种声明式API的设计哲学。 模式五：无头组件——UI库设计的"终极武器" 为什么无头组件是UI库的未来？ 传统UI库的痛点：样式固化、定制困难。无头组件彻底解决了这个问题。 这9种模式不是独立的技巧，而是软件设计原则在React中的体现： 单一职责原则 → 容器-展示分离 开放-封闭原则 → 状态缩减器模式 依赖倒置原则 → 无头组件 接口隔离原则 → 智能-愚蠢分离 里氏替换原则 最终挑战 下一次写组件时，问自己三个问题： 这个组件的职责边界清晰吗？ 如果需求变更，哪些部分会受影响？ 这个设计能让团队其他人轻松理解和维护吗？ 如果答案不理想，回到这9种模式中找答案。
53310编辑于 2025-10-09 - 来自专栏Android点滴积累
IOS小组件（9）：让App支持多个小组件的实现方式
引言 本节作为小组件基础介绍的最后一个章节，前面都没有提到如何支持多个小组件，默认新建一个组件Target，就有大中小三个组件。 如果你是为已经存在的App开发一个小组件功能，那么可能你不会需要那么多小组件。但是也有的App需要支持很多个小组件，也可能是无限个。 要实现支持多个小组件，需要使用到WidgetBundle，自定义一个WidgetBundle并改变小组件的初始化入口。 // 在添加组件预览界面显示 } } 通过WidgetBundle实现多个组件 //@main 这个注解去掉 struct Widget1: Widget { // 小组件的唯一ID 选择组件的时候，这些组件都会出现在预览列表 ?
3K30发布于 2021-06-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号