使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品。在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS。

ReactJS可以看做就是用来Render的。ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上。

前沿

  对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学, 反正内心是拒绝的, 这几天有空研究一下ReactJS,然后自己写了几个小案例, 发现和自己以前写的单向DOM数据流输出的效果差不多, 一个JS单向数据流动库----one way binding

  使用React写了几个Demo以后, 发现React还是很好用的, 因为React的思维, 会强迫我们把JS的页面结构分解成各个模块和组件, 有利于模块的重用, 其实和angularJS中的指令是一个意思,但是React更专注于HTML的View;

  但是唯一的遗憾是,如果页面的html结构改变比较大的话, 要重新修改各个组件的html, 这样是比较麻烦的;

  使用React实现了一个tab页签切换效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果_第1张图片

  把组件分解为三块, 第一块为Tab,Tab这个组件包含了两个组件:Nav导航条组件和content内容组件, Tab组件包含了用户的点击事件, 以及子模块的状态, 子模块只要负责内容的渲染,不用关心逻辑, 个人感觉这种思路非常清晰





React






  使用React实现了一个鼠标移入的菜单栏效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果_第2张图片

  把每一个菜单都单独作为一个组件, 可以很方便地实现组件的复用, 组件的open状态表示了该元素的菜单是否要显示, 每一个组件都有各自的状态,每一个组件不会相互影响;





Hello React






  手风琴切换效果:

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果_第3张图片





React






  进度条效果:

  进度条是一个组件, 启动一个定时器, 每100毫秒重新渲染界面;





React






以上所述是小编给大家介绍的使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

你可能感兴趣的:(使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果)