从jQuery、Bootstrap到React、Semantic的体验

我被迫成为了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的一个版本。