当 Amaze UI 遇上 React
发布在Amaze UI 在乱炖2015年8月7日view:3409React
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
很高兴和朋友们分享这个消息,Amaze UI 正在基于 React 封装已有组件 ,预计6月初发布。
QQ截图20150422115736
React 是什么?
React是Facebook开源的JavaScript库,用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
特点:
 
  • 声明式设计:React采用声明范式,你可以轻松描述你的应用
  • 高效:Reeact通过对DOM的模拟表现,最大限度地较少与DOM的交互。
  • 灵活:React可以与你所知道的库或框架很好地工作。
<!--more-->
为什么会选择基于 React 封装组件?
虚拟DOM不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的 instagram.com 整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。
如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。 对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。 1
对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。
2
在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。这样最外层的界面的Render只需要如下代码:
3
通过这种方式,每个组件的UI和逻辑都定义在组件内部,和外部完全通过API来交互,通过组合的方式来实现复杂的功能。React认为一个组件应该具有如下特征: (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件; (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景; (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护; (4)可测试(Testable):因为每个组件都是独立的,那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。
为什么会做 Amaze UI React 版本?
基于 React 的特点及发展趋势,Amaze UI 推出 React 版本是意料之中。
接下来的一个多月里,Amaze UI 团队将基于 React 封装已有组件,如果开发者旁友有需要的 React 版本组件请留言告诉我们。
参考阅读:


Amaze UI 在 GitHub,值得关注!

评论
发表评论
2年前
赞了此文章!
2年前

现在做安卓开发也是采用组件化方式,基本上activity里的代码很少,业务逻辑交给activity,每个组件负责自己的数据展示和网络请求。

WRITTEN BY
AmazeUI
http://weibo.com/amazeui 官方微博
TA的新浪微博
PUBLISHED IN
Amaze UI 在乱炖

Amaze UI云适配打造的一款开源的、简单好用的前端框架,目前社会反响还好,也请乱炖的开发者多指教。
Amaze UI 官网:http://meizi.io/
Amaze UI 在 GitHub:https://github.com/allmobilize/amazeui
Amaze UI 开发者交流6群:186909975

我的收藏