随笔分类 -  React

Rematch的深入学习与实战应用（一），简易数字计数器
摘要：摘要 近期在优化团队代码，发现Redux重复使用的代码过多。 经过调研发现了Rematch库：Redux是一个出色的状态管理工具，并且有着健全的中间件生态以及出色的开发工具；Rematch是没有boilerplate的Redux最佳实践。移除了声明action类型、action创建函数、thunks 阅读全文
posted @ 2020-06-30 15:35 请给我一杯冰可乐 阅读(1474) 评论(0) 推荐(0)
基于AntV图表库的Ant DeSign Charts图表展示的简单应用
摘要：摘要 数据是我们每天都在接触的东西，我们需要清晰的了解去了解数据的变化趋势，就需要让数据可视化。最近在接触学习antd的社区精选组件，上一篇文章主要是讲了高德地图的应用，这次我们就来分享下G2Plot在react中实现可视化数据图表的简单应用。 Ant Design Charts的使用方法 安装 n 阅读全文
posted @ 2020-06-12 16:50 请给我一杯冰可乐 阅读(10527) 评论(0) 推荐(0)
基于React-Amap组件库的高德地图简单应用
摘要：摘要 平常生活中，地图导航是必不可少的，最近在学习Ant Design，了解了下社区的精选组件，看到了与地图相关的精品组件库，高德地图组件库。所以记录下这次高德地图的使用心得，既可以提升自己的业务多样性，也可以分享给需要的小伙伴。 React-Amap用法 安装 npm install --save 阅读全文
posted @ 2020-06-12 16:03 请给我一杯冰可乐 阅读(1426) 评论(0) 推荐(0)
Ref实现导航滚动定位
摘要：摘要 在开发项目中时常有点击跳转滚动到锚点的需求，最简单的锚点定位就是给一个a标签，a标签的href = ‘#锚点’，然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式，在React中使用useRef来实现跳转锚点的功能。 功能具体步骤 1、创建空的Ref import Rea 阅读全文
posted @ 2020-05-22 15:18 请给我一杯冰可乐 阅读(848) 评论(0) 推荐(0)
解决微信H5静默授权获取code以及H5页面历史回退死循环问题
摘要：摘要 近期在开发H5页面相关需求，需求中有个微信静默授权登录的功能，之前没有接触过这个功能，经过调研官方文档，开发出了初级方案；初级方案可以解决获取code，但是页面返回上一个页面时，需要连续返回两次才可以回到上一个页面。经过获取流程分析，解决了返回循环的bug。 初级方案原理 当时调研完官方文档后 阅读全文
posted @ 2020-04-29 18:08 请给我一杯冰可乐 阅读(3730) 评论(0) 推荐(0)
H5页面常见开发问题总结
摘要：摘要 最近在开发H5，就在开发过程中发现H5存在着一些坑，所以就总结一下在开发过程中遇到的坑以及解决办法，本文会持续的更新，同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。 常见的通用的H5开发问题 ·微信自定义分享缩略图失效 问题现象：微信自定义分享时，需要更换新的缩略图，但是在更换上新 阅读全文
posted @ 2020-04-20 16:19 请给我一杯冰可乐 阅读(1254) 评论(0) 推荐(0)
解决React中打开App或者下载App问题
摘要：摘要 最近在写H5页面，项目中有个唤醒App的功能，由于没有接触过这类功能，就去学习了一波大佬们的经验。在此分享出来和大家一起学习学习。 内容 一、唤醒方式 经过查找资料，找到了三类较为客观的唤醒方式： 1.URL Schemes 2.Chrome 3.ios UniversalLink / and 阅读全文
posted @ 2020-03-18 20:21 请给我一杯冰可乐 阅读(1098) 评论(0) 推荐(0)
解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题
摘要：摘要 在React项目中，我们需要采用它的路由库React-Router来进行页面跳转，React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式，一种是hashHistory的形式，形如：localhost:3000/#/free-lesson的路由，另一种是browserHisto 阅读全文
posted @ 2020-02-25 15:51 请给我一杯冰可乐 阅读(1542) 评论(0) 推荐(0)
自定义化antd的Modal组件并适配PC端部分分辨率
摘要：摘要 近期在做页面的优化，需要对antd的Modal组件模块进行精细的调优，简单地说就是给Modal二次美妆，提升用户的体验感。在此分享一下自己在实际逻辑代码中对美化Modal的理解，并用简单生动的demo来展示学习成果。 运行项目 安装所需要的node环境以及安装antd库 技术依赖 demo中简 阅读全文
posted @ 2020-01-15 16:05 请给我一杯冰可乐 阅读(4137) 评论(0) 推荐(0)
如何使用classnames模块库为react动态添加class类样式
摘要：摘要 在react中添加动态的css时，传统的方式较为繁琐，今天刚好学习到一个模块库可以便捷的解决这个问题。对的，它就是“classnames”。 classnames模块库 npm安装 npm install classnames --save Usage with React.js classn 阅读全文
posted @ 2019-12-03 21:15 请给我一杯冰可乐 阅读(2974) 评论(0) 推荐(0)
react import 配置路径别名'@'，简化import Component的方式
摘要：摘要 在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“../../components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“../ 阅读全文
posted @ 2019-12-02 20:21 请给我一杯冰可乐 阅读(10645) 评论(7) 推荐(1)
基于create-react-app脚手架，按需加载antd组件以及less样式
摘要：摘要 为了更好的书写css样式，在react中引入less，在网上查询了许多关于react引入less样式文件的资料，大多数都是需要在react项目中npm run eject暴露出底层文件，然后在底层文件中修改dev-env的环境配置。在请教了大佬后知道可以根据antd官网文档中的高级配置来配备l 阅读全文
posted @ 2019-11-27 19:58 请给我一杯冰可乐 阅读(1093) 评论(0) 推荐(0)
React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）
摘要：摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏，当导航栏置顶时，导航栏沉浸在背景图片里；当鼠标滑动滚轮时，导航栏固定滑动并展示下拉样式。 JS部分 相关技术栈：react、antd、react-router。详细的技术栈应用请参考官方文档的使用说明。 * 展示主页App.jsx组件代码 阅读全文
posted @ 2019-10-27 15:52 请给我一杯冰可乐 阅读(4259) 评论(2) 推荐(0)
React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片（且可控制图片数量）
摘要：见章知著 1024，程序员们节日快乐！本文主要讲述react配合antd以及antd-img-crop第三方库实现一个可控的图片上传功能。 运行项目 需要具有node环境 第三方库安装 1.antd（Upload）安装和初始化 1.1.在代码编辑器(vsCode或者其他编辑器)代开终端，输入命令行安 阅读全文
posted @ 2019-10-26 21:00 请给我一杯冰可乐 阅读(8285) 评论(2) 推荐(0)