w3ctech

当 Amaze UI 遇上 React

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

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进行拆分,实现松耦合。

对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。这样最外层的界面的Render只需要如下代码:

通过这种方式,每个组件的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,值得关注! https://github.com/allmobilize/amazeui/stargazers

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复