Semantic-UI的React实现(一):架构介绍

简介:
+关注继续查看

React组件化的UI库

目前React组件化的UI有很多,这里有很多已实现的React组件库。如:

  • TouchstoneJS - React.js powered UI framework for developing beautifulhybrid mobile apps.
  • Elemental UI
  • RSuite | 一个基于 React.js 的 Web 组件库
  • Ant Design of React - Ant Design
  • Material-UI
  • React-Bootstrap
  • React + Foundation · Foundation as React components
  • Essence - React Material Design Framework
  • React-MDL: React Components for Material Design Lite
  • Belle - Configurable React Components with great UX
  • MUI - Material Design CSS Framework
  • Grommet
  • React Toolbox
  • react-blazecss 0.4.3 Demo
  • Pivotal UI: Intro
  • BFD UI

但是我一直比较偏爱的Semantic-UI不在这个列表中。虽然官方目前也在做相关的工作(戳这里),但目前还没有出稳定版本。个人觉得这正是一个练习的机会,将Semantic-UI库React组件化。

Semantic-UI

Semantic-UI是一套完全语义化设计的前端框架,使用起来灵活又方便,可以满足多变复杂的页面实现需求。从官方文档(版本2.2)来看,主要有四类框架元素:

  1. 元素
  2. 组合
  3. 视图
  4. 模块

具体示例可参考官网。

基本分析

Semantic-UI实现于语义化设计,各个类可以自由组合使用已实现页面需求。每个组件的属性定义大多类似,如Button和Icon,都有size或者color等常用属性,而这些属性可用公共辅助类来定义和声明。

从实现上来讲,元素、组合和视图的大部分实现,都可以用纯CSS声明来达到效果,但模块类的组件往往需要js的辅助以实现动态效果。考虑到这一点,组件实现大致分为两类实现:UI类和动效类。需要实现3DTransition的组件都继承于动效类,剩余只需CSS声明的组件继承于UI类。当然动效类也同样继承于UI类。

UiElement

UiElement作为所有基础UI组件的基类,主要负责以下几类实现:

  1. 元素class的生成
  2. 元素事件回调的生成

基于Semantic-UI的语义化实现,所有class类均由多个属性拼装组成,所以每个UI组件的属性在组件内声明即可,class类的生成由父类UiElement负责。

AmElement

AmElement作为动效组件的父类,主要负责以下功能实现:

  1. 组件的show/hide接口调用
  2. 直接操作组件DOM,生成transition的style

每个动效组件继承AmElement后,均将本组件的ref引用传递给父组件,由父组件统一调用并修改子组件的DOM元素style属性,以实现3DTransition效果。

PropsHelper

组件Props的辅助类,用以生成组件的class。PropsHelper中有多个静态方法:

  1. createStyle:用以生成组件class定义
  2. getDefaultProps:取得所有组件的通用props

每个组件在生成class定义是,只需提供本组件的props以及属性定义,即可生成对应的class定义。


作者:sheva

来源:51CTO

相关文章
|
4月前
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-react16使用得架构1
前端学习笔记202307学习笔记第五十七天-react源码-react16使用得架构1
25 0
|
5月前
|
缓存 JavaScript 前端开发
理解React中Fiber架构(二)
自从React16版本更新了Hook用法,同时引入了新的Fiber架构去重构整个渲染和事件处理过程,React团队引入Hook是为了更好剥离业务代码,让开发能更加友好的抽象代码,达到低耦合的函数组件目的,那么重构Diff算法,引入Fiber架构是为了什么呢? 其实只是为了能够一个目标快速响应,原先Diff算法时间复杂度为O(n3) O(n^3)O(n3) ,最后经过Fiber重构达到了O(n)O(n)O(n),这里面具体有什么门道,值得我们去深入研究一下。
261 0
|
5月前
|
Web App开发 XML 缓存
理解React中Fiber架构(一)
自从React16版本更新了Hook用法,同时引入了新的Fiber架构去重构整个渲染和事件处理过程,React团队引入Hook是为了更好剥离业务代码,让开发能更加友好的抽象代码,达到低耦合的函数组件目的,那么重构Diff算法,引入Fiber架构是为了什么呢? 其实只是为了能够一个目标快速响应,原先Diff算法时间复杂度为O(n3) O(n^3)O(n3) ,最后经过Fiber重构达到了O(n)O(n)O(n),这里面具体有什么门道,值得我们去深入研究一下。
62 0
|
8月前
|
前端开发
React Fiber生命周期及架构
React Fiber生命周期及架构
|
前端开发 JavaScript 算法
Deep In React之浅谈 React Fiber 架构(一)
2016 年都已经透露出来的概念,这都 9102 年了,我才开始写 Fiber 的文章,表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了,在写文章的时候参考资料比较多,比较容易深刻的理解。
134 0
Deep In React之浅谈 React Fiber 架构(一)
|
前端开发 JavaScript 算法
ivx杨帆启航React/Pixi.js/FaaS、Krpano及微服务架构
ivx杨帆启航React/Pixi.js/FaaS、Krpano及微服务架构
229 0
ivx杨帆启航React/Pixi.js/FaaS、Krpano及微服务架构
|
存储 前端开发 算法
React系列——React Fiber 架构介绍资料汇总(翻译+中文资料)
React系列——React Fiber 架构介绍资料汇总(翻译+中文资料)
194 0
|
移动开发 Dart 前端开发
React Native 迎来重大架构升级,性能将大幅提升
7 月 14 日,React Native 核心团队的 Joshua Gross 在 Twitter 说,RN 的新架构已经在 Facebook 内部落地了,并且 99%的代码已经开源。这次的架构升级“蓄谋已久”,Joshua 说他们从 2018 年 1 月就开始规划了。
393 0
React Native 迎来重大架构升级,性能将大幅提升
|
JavaScript 前端开发 开发工具
webpack+react多页面开发(二)-终极架构
webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html。
1661 0
|
前端开发 Java 测试技术
Java高级编程-React 项目的架构和规范
    架构和规范 架构是为了解决什么问题呢?我理解是效率问题。通过一个好的架构,能让你很容易地、具备一致性地理解一个系统,在此基础上快速地、可持续地完成业务功能。
1464 0
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多