标签归档:react

基于react实现无限分级菜单

在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起。

本文纯粹为了练习一下react,因此我会在react环境下实现这么一个小组件:它假设了菜单数据来自于网络请求,并且仅实现无限分级菜单的核心功能(父子关系,展开与收起),至于样式则不是关注的重点。 继续阅读

[React-章节10 实践篇] 做一个留言板项目 之 实现后退不刷新效果

接上篇《[React-章节9 实践篇] 做一个留言板项目 之 实现Loading特效》

背景

react在切换组件时,前一个组件会经历完整的组件销毁过程,后一个组件会经历完整的组件加载过程,具体可以回顾react的生命周期

因为这个原因,当我从详情页返回到列表页的时候会发现列表页重新渲染回到了初始的状态,并不是一个合理的用户体验。这个问题只有单页应用会面临,因为对于多标签页的应用来说,每个标签页的内容互不影响。 继续阅读

[React-章节9 实践篇] 做一个留言板项目 之 实现Loading特效

接上篇[React-章节8 实践篇] 做一个留言板项目 之 留言列表页

一般h5应用在页面加载完成之前都会有一个loading加载的动画效果,一旦完成加载一次性展现完整的内容给用户,这样更贴合native应用的体验,我相信没有用户喜欢看着一个残缺的页面等待网络数据下载完成。 继续阅读

[React-章节5]学习react-router,实现单页应用demo

接上篇《webpack的代码分割与公共代码提取》,本篇终于要学习如何编写单页面应用了。在多页面应用中,超链接<a>会跳转到另外一个html中,而单页面应用中,超链接<a>不会发生html页面跳转,而是触发在当前页面中渲染不同的组件,这是最直观的差别。

基于webpack+react实现单页应用,需要用到react-router插件,下面就开始学习吧! 继续阅读

[React-章节4]webpack的代码分割与公共代码提取

接着上篇《如何为react导入css和img?》 来说,对于一个多页面应用来说,webpack会把每个entry独立编译成chunk,也就是生成一对js和css文件。如果2个chunk代码都引用了同样的库(例如jquery),那么jquery代码会被分别打包进入2个chunk中,导致js文件尺寸增加,是一个不必要的冗余。 继续阅读