摘要：前一段时间分享了基于vue和element所封装的弹窗组件封装Vue Element的dialog弹窗组件，今天就来分享一个基于react和AntD所封装的弹窗组件，反正所使用的技术还是那个技术，情况还是那个情况。只是基于vue所封装的弹窗组件和基于react所封装的弹窗组件还是有很大差别的。一样的是封装的思想和思路，不一样的是实现的技术。 阅读全文

摘要：上传文件也是我们在实际开发中常遇到的功能，比如上传产品图片以供更好地宣传我们的产品，上传excel文档以便于更好地展示更多的产品信息，上传zip文件以便于更好地收集一些资料信息等等。至于为何要把上传组件封装成一个公共的、可复用的组件，在前两篇文章封装react antd的form表单组件、封装react antd的表格table组件中已经作了很多介绍，这里不再赘述。 阅读全文

摘要：form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了。 阅读全文

摘要：封装组件是为了能在开发过程中高度复用功能和样式相似的组件，以便我们只关注于业务逻辑层的处理，提高开发效率，提高逼格，降低代码重复率，降低劳动时间，减少加班的可能。本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能，由于无状态组件在数据变更后不会主动触发页面的重新渲染，所以本次的封装也用到了React Hooks。 阅读全文

摘要：上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件，由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢。其实，用react实现同样的功能会更简单，不用那么多的API，不用去查找这些平时可能用的很少的API的用法，这也是为什么很多人喜欢react的原因，react只提供了一些核心的API，至于怎么实现特定的功能，你自己想办法去实现咯，这就是足够灵活啊！！！ 阅读全文

摘要：在使用React时，会经常需要处理state里边设置的初始值以达到我们的实际需求，比如从接口获取到列表数据后要赋值给定义的列表初始值，然后数据驱动view视图进而呈现在我们眼前，这种最简单的赋值方式实现起来也很简单，其实VUE实现起来更简单，直接写成this.listData = res.data即可，这里不做过多vue的赘述。那么在使用React时你有没有想过如果是给一个数组中的某一项重新赋值呢？如果给一个Object对象中的某一项单独重新赋值呢？还会这么简单吗？类似这种的，如果我只想修改listData数组第二项中的name值呢？如果我只想修改obj中的age值呢？最开始的那种赋值方法已经不能用了，否则会报错的。 阅读全文

摘要：先来说说使用Ant Design和Element-ui的感觉吧。公司的项目开发中用的是vue+element-ui，使用了一通下来后，觉得element-ui虽然也有一些问题或坑，但这些小问题或坑凭着自己的能力还都能解决掉，使用起来也很丝滑柔顺。而Ant Design和React更配哦，但是也说一下使用Ant Design的感觉吧，首先个人觉得Ant Design给的demo有点乱七八糟，可能是React本身js和DOM混在一起跟人的感觉就不够清爽。其次，Ant Design的有些坑，会令你防不胜防，而且很诡异，比如它的select组件，设置了placeholder时也设置了value绑定一个state默认的空值，这时placeholder却不生效，当然会有人说你设置了value绑定一个state默认的空值，placeholder当然不起作用了，可空值本来就是false，本来就是不存在的值，有不 阅读全文

摘要：最近在学习react时，用到了很流行的UI框架Ant Design，也了解了一下Ant Design Pro，发现它们都有导航组件，Ant Design框架的导航菜单可自行查看，Ant Design Pro是权限菜单，权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户，比如管理员有给用户分配不同角色的权限，那管理员就可以看到系统管理等导航菜单，而用户A只有发布某些业务的权限，那用户A就不能看到系统管理的导航菜单等等。不过这不在我们本文的考虑范围内，有兴趣的同学可以自行去看它的API。 阅读全文

摘要：最近，自己在摸索react的时候，遇到一个很奇葩的问题，大概是这样的：我从列表页使用跳转到详情页面，列表页面的路由是'/list'，详情页面的路由是'/list/detail'，由于详情页面的路由里边也包含了'/list'，所以在点击列表页面要去详情页时，地址栏里的地址变了，可详情页面却在列表页面里边直接加载出来了，导致俩页面成为一个页面了，这在我写vue的时候从来就不会出现的问题，怎么到了react就出现这个问题了呢？ 阅读全文

摘要：constructor()——构造方法 这是ES6对类的默认方法，通过new命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor()方法。 super() ——继承 在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor()调用 super()方法，否则新建实例时会报错。 报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的this对象，然后对其进行加工，而super()就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。 阅读全文