React之表格操作
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
对于官网上的那个表格demo又进行了改造,记录一下其中的困难和解决思路,当然还有功能没有完善,会继续利用空余时间来实现一下。
github:https://github.com/liuzaijiang/React-text
——————————————————————————————————————————————————————
在上一篇的基础上http://blog.csdn.net/liuzijiang1123/article/details/66974630 又做了一部分修改:
1.利用webpack进行了打包压缩处理,并提取出了的第三方库文件;
2.增加了按照价格排序的功能;新加商品后也能按照排序的方式来显示;
3.增加了分页的功能;
4.减少了组件不必要的render;
——————————————————————————————————————————————————————
感悟:其实自己实现上面功能的过程也是比较“蛋疼的”,因为表格之间的状态交互比较多,经常要各个子组件之间通信,除了一些逻辑需要自己思考处理外,还有就是自己想实现一些不必要的render,这就需要用状态来判断,是否需要重新渲染组件,存在状态难找,和流向不是那么容易就容易理清楚的困难;随着表格的功能越来越复杂,后面觉得有必要学习一下Redux了~
webpack
webpack打包压缩我是参考这篇文章:http://www.jianshu.com/p/4df92c335617
当然现在webpack都已经是2.X了,所以还是会有版本迭代的:https://doc.webpack-china.org/guides/migrating/
然后我再稍微说几个需要注意的地方:
1.babel的loader中的名字要写成'babel-loader'
2.生成 .babelrc 文件需要写成 .babelrc. 这样的形式(前后各一个点)
3.如何设置NODE_ENV=production(React切换成产品模式 )
在cmd中直接敲set NODE_ENV=production
然后在webpack.config.js中
plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), ]
4.将第三方库另外打包一份(比如我们的react,react-dom这样的第三方js,最好和我们自己定义的js分开,这样webpack利用diff算法打包的时候也会快一点,毕竟这些第三方库我们基本不会去修改)
entry: { bundle:__dirname + "/app/main.js", vendor:["react","react-dom"] },
我们需要再entry中定义好,然后再plugins中利用webpakc自带的插件进行打包
plugins: [ new webpack.optimize.UglifyJsPlugin({ output: { comments: false, // remove all comments }, compress: { warnings: false } }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), ]
5.利用webpack-dev-server进行修改后实时刷新
自从每次打包后我这边每改一次都要所有的重新打包,需耗费我10多秒的时间,真的是太....那个啥了;
不过在使用过程中我遇到了一个困难,就是本地运行成功了,但是无法实时刷新;
我的解决方法如下:(都是针对我自己的demo进行修改,实际情况实际讨论)
首先在package.json这个文件中进行修改
"scripts": { "start": "webpack", "dev":"webpack-dev-server --inline --content-base build/" },
我们运行npm install start的时候是常规的打包,运行npm run dev是启动webpack-dev-server,--content-base 后面接的是index.html文件的路径,我是放在build/下面的
然后修改一下webpack.config.js
output: { path: __dirname + "/build/js", filename: "[name].js", publicPath: 'js/' },
最后修改一下index.html
<script src="js/vendor.js"></script><script src="js/bundle.js"></script>
这样就可以实现实时修改文件,然后浏览器会自己刷新了。
最后我还是想说一下为什么会出现这个原因,我个人的理解是,开启webpack-dev-server后进行修改打包后生成的文件没有放在我的本地文件夹里面(Path指定的路径),而是在PublicPath指定的路径;
path:用来存放打包后文件的输出目录 ;
publicPath:指定资源文件引用的目录 ;
而我原来的index.html引用的js是用的Path的路径,我也没有指定PublicPath的路径,所以它默认放在根路径,这个根路径就是http://localhost:8080/;
如果我不指定路径,那么index.html中可以就直接这样xxx.js引用js;我这里指定了publicPath : js/" 其实是http://localhost:8080/js,然后引用的时候写成js/xx.js即可,这样做是为了和我本地编译打包的脚本路径一致,方便我本地的编译,不用去再更改脚本的引用路径了;
6.如何配置多入口文件
如果你是多页面应用,那样肯定就会有多个入口文件,在我们的webpack.config.js中的entry需要一个个列出来
譬如:
entry:{a:__dirname + "/app/a.js",b:__dirname + "/app/b.js",c:__dirname + "/app/b.js",......}
这样需要我们手动一个个去敲,肯定不方便,所以我们这边要“智能一点”
我的解决方法如下:
定义一个函数:
function getEntry(){ var entry = { bundle:__dirname + "/app/main.js", vendor:["react","react-dom"],//将第三方的依赖放入一个模块包中,打包成一个模块,如果里面的文件还有依赖则依赖性最高的放最后 }; glob.sync(__dirname +'/app/settings/*.js') //读取开发目录,并进行路径裁剪 .forEach(function(name) { var start = name.lastIndexOf('/')+1, end = name.length-3; //保存各个组件的入口 var n = name.slice(start, end); entry[n] = name; }); return entry; };
除了main.js和第三方库外,还有一些其他的js我写在了settings目录下,所以传的是__dirname +'/app/settings/*.js' 这里面的具体路径自己更换,我的app目录是和webapck.config.js在同一目录下
然后:
entry:getEntry(),
就可以把我们需要打包压缩的js全部包含进去,当前我的例子只是抛砖引玉。
分页
对于分页,这里我花了比较多的时间:
以前做过jq的分页,知道了大体的思路,首先是需要知道一共有多少个数据,然后是每页显示多少行,然后就是求出一个页数,再对表格中的数据进行选择性的显示。
但是刚接触到React分页的时候还是一头雾水,有点不知道从哪下手,毕竟React不能那么容易就能操作到每一个节点,轻松获取我们想要的数据。
我这边的思路首先是从显示和隐藏每一行开始,因为每一行我这边封装成了一个小组件,我这边完全可以控制其display属性来显示,不过这里需要注意的就是不能用jq的那种方法,addClass,removeClass或者是.css来控制,我们需要用变量来控制,比如:
var display="none" <tr style={{display:display}} />
这里通过改变display变量来控制显示。
当我们能够去显示和隐藏每一行后,就需要来进行选择性显示了和隐藏了;
if(this.props.index<this.props.currentPage*this.props.eachPage||this.props.index>(this.props.currentPage+1)*this.props.eachPage-1){ display="none"; }
this.props.index是当前这一行的索引,即数据当前行数;
this.props.currentPage是当前页数;
this.props.eachPage是每一页显示行数;
比如,我们要显示第一页的数据,每一页显示5个数据,那么显示的具体行数就是0--4,那么小于0的和大于4的我们就会去隐藏。
这里的this.props.currentPage其实是个变量,是和另一个页面跳转的组件进行通信的,中间就需要用父组件当作一个媒介来传递。当我点击下一页,或者选择具体的页数进行跳转的时候,需要改变这个数据。
当然我们还需要进行一些边界问题的处理:
A.比如我们目前是第一页,那么我们的首页和上一页就要被灰掉,不能进行点击触发,我们处于最后一页的时候需要把下一页和尾页同样灰掉;
我的做法如下:
类似于前面的隐藏和显示,我这里给首页,前一页,下一页,尾页都添加了一个变量"ban"为它的className(ban设置的CSS是灰掉这个按钮);
然后我们就进行判断,当前是首页还是尾页,相应的对这个ban变量进行赋值,如果不满足条件就赋值一个空值,满足就赋值我们定义好的css变量;
到这里我们只是对css进行了灰掉,但是你点击的时候还是会触发函数,所以我这里又在点击的时候又进行了一次判断;由于我这里是利用的事件代理,所以对于这4个按钮我只是定义了一个click函数,然后判断他们的id,来进行判断到底是哪个按钮,在这个基础上我再判断是否className为ban ,如果是,则不会去触发。
B.如果我现在处于最后一页,我需要去删除掉最后一个数据,那么表格应该会自动跳转到前一页。
(这个问题对我来说也是具有挑战性的)
我的思路如下:
首先判断当前是不是最后一页(如果不是,你删除数据,表格会自动更新,后面的数据会补上)
如果是最后一页,再判断是不是最后一个数据(这里的最后一个数据是所有数据的最后一个,那样这样删除跳转就没有意义,而且还会产生bug)
如果不是最后一个数据,再判断是不是最后一页的最后一个数据(如果不是,后面会数据会补齐)
如果是,就更新当前的页数为上一页
ps:这里判断总页数的方法可以参考一下,我这里是用总商品除以每页显示的行数,pasreInt是去除小数部分,如果正好可以整除,那么除出来的数据正好可以当作页数,如果不能整除的话,那么就向上取舍。(具体情况还是具体分析吧,我这里的总页数是1,2,3但是我当前页是0,1,2)
if(this.state.products.length/this.state.eachPage==parseInt(this.state.products.length/this.state.eachPage)) { var page=parseInt(this.state.products.length/this.state.eachPage); } else { var page=Math.ceil(this.state.products.length/this.state.eachPage); } if(this.state.currentPage==page&&this.state.products.length!=0&&this.state.products.length%this.state.eachPage==0) { this.setState({ products:this.state.products, currentPage:this.state.currentPage-1 }) } else{ this.setState({ products:this.state.products, }) }
最后还需要注意的就是,我这里跳转具体页数是select选项和前一页它们按钮触发方式不一样,前者是onChange后者是onClick
减少render
其实组件更新的时候,很多相关组件也会同时更新渲染,有些组件是死的,有些是没必要更新的,所以这里我们可以选择性进行更新。
这里就是当它的isAdd属性改变了我就进行更新,这个就是我们的添加商品的窗口,只有我点击添加了再进行组件渲染,其他时候没必要进行组件渲染。
shouldComponentUpdate(nextProps, nextState) { if (this.props.isAdd !== nextProps.isAdd) { return true; } return false;}
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
React之表格操作相关推荐
- react+antd表格操作列加Dropdown和menu写法
需求:表格的每行操作里,有一个Dropdown组件,里面是menu组件,这里在列进行渲染的时候,把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示 代码分析: 1.表格的列渲染操作列的 ...
- React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
- 4、jquery表格操作
1.<html> 2.<head> 3.<title>jquery表格操作</title> 4.<script language="ja ...
- python处理excel表格实例-python2 对excel表格操作完整示例
本文实例讲述了python2 对excel表格操作.分享给大家供大家参考,具体如下: #!/usr/bin/env python2 # -*- coding: utf-8 -*- "&quo ...
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- [react] React中怎么操作虚拟DOM的Class属性
[react] React中怎么操作虚拟DOM的Class属性 render() { this.debug('render ....'); this.components.push(<Atten ...
- react 执行入口_如何使用React执行CRUD操作
react 执行入口 by Zafar Saleem 通过Zafar Saleem 如何使用React执行CRUD操作 (How to perform CRUD operations using Re ...
- word vba 读出光标所在的列数_word高效技巧:这几个表格操作让工作更快速
说到表格,都说Excel制表功能更强大.但是,表格在Word排版中的应用同样非常广泛.比如,在制作简历表.求职表和登记表等一些不规则且不需要做复杂统计分析.有大量文字的表格,我们都会用Word文档来制 ...
- QT之Excel表格操作
QT之Excel表格操作 提前准备 打开读取excel文件 写入保存excel文件 提前准备 pro文件中添加: QT += axcontainer 在需要使用excel的文件中添加: #includ ...
最新文章
- java实现的18位×××格式验证算法
- 大型互联网b2b b2c o2o电子商务云平台
- 有道python网课怎么样-网易有道2017内推编程题 洗牌(python)
- SAP系统中的银行主数据FI12
- 分析解决Java运行时异常
- js jQuery取消添加超链接的方法小结
- php框架所用到的核心概念,【PHP】PHP现代框架代表-Laravel框架核心技术特性
- nginx.conf文件内容详解
- 构建你自己的论坛,基于windows服务器的xampp+discuz论坛
- C++:编译实验之LR分析器
- 在执行某个行为时,其大脑是否产生了对应的稳定脑神经模式映射?如果存在稳定映射,是否能运用机器学习方法发现未知行为神经回路?
- 06-Sentinel限流熔断应用实践
- 电脑复制,电脑复制粘贴,详细教您电脑不能复制粘贴怎么办
- 机器学习模型的超参数优化用于分子性质预测
- jquery.qrcode.js
- CAD/CASS断面偏距高程高差批量标注插件(可自动避让、横向或纵向标注)
- 学习bootstra前端框架
- 东东在用计算机计算一道题时 把被除数的前,人教版三年级数学下册开学测试卷(带答案)...
- JavaScript购物车小项目
- 为什么全球最好的大学大半在美国?看看美国的孩子是怎么念书的
热门文章
- Babuk勒*索软件(病*毒)解密
- html分享插件,10个jQuery插件分享
- 荣耀30s鸿蒙的最新消息,3月30日发布!荣耀30S真机首次公开:蝶羽元素加持 颜值在线...
- USB摄像头显示为VMare USB device
- 学校公文办公处理系统_基于ASP.NET和Swfupload、FlashPaper2.2、校讯通短信发送的开发
- 学习大数据的第48天(zookeeper篇)
- Python读取PDF文档(或TXT)
- 如何为博客做seo?
- HBuilder X问题记录
- gitbook 安装