Amaze UI 2.2

AmazeUI

简单好用的前端框架

当 Amaze UI 遇上 React

amazeui 2015-04-22
很高兴和朋友们分享这个消息,Amaze UI 正在基于 React 封装已有组件 ,预计6月初发布。

QQ截图20150422115736

React 是什么?
React是Facebook开源的JavaScript库,用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
特点:

 

  • 声明式设计:React采用声明范式,你可以轻松描述你的应用
  • 高效:Reeact通过对DOM的模拟表现,最大限度地较少与DOM的交互。
  • 灵活:React可以与你所知道的库或框架很好地工作。

为什么会选择基于 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 版本组件请留言告诉我们。

 

参考阅读:
颠覆式前端UI开发框架:React

Amaze UI 在 GitHub,值得关注!



12 条评论

  1. ufopw

    期待!

  2. 风雨

    期待一个

  3. 你大爷的

    都不知道 React 是啥

  4. wwll

    希望有更多关于React的文章!

  5. 小雨萌萌

    强烈推荐用react,顶一个先

  6. cc

    顶一个

  7. 麦芽糖

    期待一个

  8. seri

    很期待,同时想提一点,如果只适配手机端。slider 能不能 换成 swiper 更强大。

  9. madu

    我要学学这个

  10. cmy

    现在amazeui在做和天猫前端一样的事咯?
    天猫前端的新浪微博:Facebook对于React Native提出的是Learn Once, Write Anywhere。可对于跨终端的业务来说,着实成本有点高。于是我们天猫前端正在实践将React Native的代码自动转换为Web代码,从而达到Write once, Run Anywhere。

    还是说不一样的东西来的 React Native 和React

  11. bob

    我希望开发者们能把 选项卡 组件弄完善,目前的选项卡,点选选项1,结果选项1234都会被渲染和呈现,我们希望的是点选哪一个才渲染哪一个选项卡片的内容。典型开发用例为 收件箱,发件箱,草稿箱。另外,我希望web组件里面的菜单组件不要总是黑漆漆的,为什么不能用蓝色,或者可以自定义,我打算用来做PC网页和移动端网页的菜单,一次开发即可。希望采纳,谢谢。另外,

  12. meizi

    强烈推荐用react,顶一个先


发表评论

*

×
Amaze UI 微信
在微信上关注我们