从jQuery、Bootstrap到React、Semantic的体验

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/u013560932/article/details/72717080

我被迫成为了React使用者,熟练级,Semantic使用者,入门级。

由于为了组件间的通信,异步刷新Dom元素等等需求,不得已熟悉了React的state,publish,subscribe(PubJS)等子、父,同级组件通信内容,事实是,除了React Dom渲染实在慢,其他都很漂亮,代码也很简洁。

虽然有点对不起John Resig,但是我还是要说,相比于JQuery的自定义插件,React的创建Dom组件(Class)更为方便,更为美观。虽然两者目的相同,都是将Dom元素分离封装,使其变得可管理,但是还是React后来居上。
组件状态,属性等概念,也将Dom编写向面向对象靠近了一大步,大大提高了代码的可扩展性,使得庞大的代码也可以有结构有条理的编写 。虽然JSX很烦,但是的确比JQuery的String拼接要快的多,也更贴近Html5开发。

当然,使用React并非不使用JQuery,我只是在Dom元素操作已经页面动态变更时使用React来维护Dom元素。
但在数据传输时,仍然选择了经典的$.ajax

关于样式,Bootstrap在整体页面布局和风格设置上十分优秀,不愧于扁平化艺术风格布局的创始作。
但Semantic吸引我的是其炫酷,色彩斑斓的而又简洁的小组件,无数颜色绚丽的按钮,Demo中布局完善的评论模块,标签、进度条、遮罩框、弹出框,尤其是其纯CSS实现的动态效果,一个class就可以添加。实在是非常方便。值得一提的是同级的类名布置,相比Bootstrap的父子级类名嵌套更为自由。
更能让使用者发挥出最大的想象力,无限的自由组合,无限的创意。

如果说缺点,那就是不够复杂了吧。没有Bootstrap的庞大的用户开发的插件库,官方提供的功能可以让用户设计出一些漂亮的新的组件,但是不及Bootstrap的海量已经由其他开发者做好的组件。
第二个缺点可能是名字吧,对于我来说太难拼了,音节复杂,到现在我还不能完全打出这个单词。

Bootstrap与Semantic的兼容性就不像JS插件那样可兼容了,他们的样式冲突还待解决,所以在同一页面,恐怕要做出抉择,选择是使用Semantic还是Bootstrap。

尤其要说的一点是文档问题,Semantic的中文文档是个假的文档,除了名字全是英文。相比之下,Bootstrap就有人去详细的翻译出中文文档,不过看样式的时候语言倒是无法阻碍复制粘贴。完全看不懂英文的人也可以看懂他的文档 (笑。

后记:
Semantic有完整的中文文档,很全面。https://semantic-ui.qyears.com
React 组件通信及异步加载Dom元素有一篇很好的文章,我很庆幸找到了这篇文章。http://www.tuicool.com/articles/AzQzEbq
ReactDom渲染实在是,太慢了!!!
所以异步成了必须要做的事情!!!
PS:Semantic和React有合作,React推出了支持 Semantic的一个版本。

猜你喜欢

转载自blog.csdn.net/u013560932/article/details/72717080