daoke_li-CSDN博客

原创如何使用React Hooks优雅的获取数据？

原文链接：https://www.robinwieruch.de/react-hooks-fetch-data作者简介：https://overreacted.io/zh-hans/my-decade-in-review/如果我们要请求一个接口获得数据，并要遍历到当前页面中渲染出来，可能会这么写import React, { useState, useEffect } from 'react';import axios from 'axios'; function App() { con.

2021-04-20 18:56:04 823

原创程序员一天的作息

起床和早饭大约六点前后自己醒来，有时感觉浑身困就多眯一会。最近感觉阴虚(手脚心热，咽干口干，心悸心动过速)的情况比较明显时，早上起来气虚(神疲乏力)的情况也会明显。一般六点半前会洗刷完毕，这时如果想起来或听到手机有动静，就打开公司通信工具上报健康并在微信群打卡。想起来的话喝点温开水，然后开始按计划学习，偶尔会看个感兴趣的新闻，大约快到7点时，如果姥姥(孩子的姥姥)还没出来，我就烧上水准备煮面条或者腾馒头。这时姥姥如果出来，看一眼窗外，会说“哇，今天天气不错，能看到那么远”。如果厨房没鸡蛋了，我拿下鸡蛋筐，

2021-04-16 22:39:30 1606 4

原创 antd-mobile的长列表ListView不更新的坑

antd-mobile的长列表ListView在react hooks中不更新的问题在react hooks中使用antd-mobile的长列表listView的时候，经常发现有时页面数据交互(如修改某行状态、点赞、评论等)后进行了更新，list和dataSource也更新了，但页面就是不更新；而上滑加载数据时list长度增加，dataSource随之更新，页面就能正常更新。感觉这应该是dataSource没有很好的识别更新条件而为驱动组件刷新，经反复探索，发现需要在dataSource更新的时候将lis

2021-03-24 10:52:55 1221

原创 vite+react+antd-mobile实现类似react-app-rewired的按需加载

步骤开发环境安装依赖yarn add -D vite-plugin-babel-import修改vite.config.jsimport vitePluginImport from 'vite-plugin-babel-import'……plugins: [ reactRefresh(), vitePluginImport([ { libraryName: 'antd-mobile', libraryDirectory: 'es',

2021-03-03 14:35:14 1427 2

原创使用antd-mobile的PickerView实现一个跨天时间选择器

需求逻辑今天到明天预约时间范围是下一分钟开始往后的24小时切换每列数据时，其他列对应的数据要自动切换到合适的范围每次打开预约开关时，预约的数据列表及时更新antd-mobile的PickerView组件有个bug：在onChange事件中切换数据源后，有时可以自动再次触发onChange以获取正确的值，但有时不会。所以这里在每次切换数据源后，根据情况手动获取picker的值以进行修正完成效果如下：组件代码import { useState, useEffect } from 'reac

2021-02-27 14:28:52 1674 1

原创数码相机和中医的故事

缘起一位老中医问我懂不懂照相机的参数，我想起了十多年前学习摄影的日子。那年刚毕业，实习攒的钱加上半个月工资凑了八百多块钱，国庆节时跑遍李村台东，选定一款已不再生产的佳能Powershot-A470，加上4块2300毫安时的品胜充电电池和充电器，然后开始了我疯狂的拍摄历程。只要外出，脖子上一定挂着相机，路上车上，上班下班有机会就拍不停，拍人像时约学妹，拍月亮时买个迷你三脚架，拍大海及海边夜景时从沿海某个站下车，往回边走边拍，拍到中山路再到劈柴院。后来去新疆带着拍了大半年，终于拍坏了快门线（据说寿命是拍一万

2021-02-26 23:53:09 326

原创 win10日历中节日文字颜色看不清的解法

打开win10日历如下，其中节日的文字颜色和背景太相近而看不清。也不知鼎鼎大名的windows为什么会做出如此体验不好的产品。经查找，网上已有很多小伙伴们总结出来的方法，但部分有效的方法有的改不到期望中的颜色，有的会影响到其他不想改的颜色。在这里分享一下我觉得比较合适的方法：桌面右键 -> 个性化 -> 颜色，在自定义颜色中直接调明度即可改善看不清的问题。如果对颜色有其他要求可以在调色板中寻找。...

2021-02-22 10:31:57 5517

原创核桃风车的制作

核桃风车的制作缘起现在的孩子赶上时代了，玩具堆积如山，但对玩具的新鲜感却没我们小时候那么强。仔细观察，现在的玩具几乎都是一个套路：装个电池能动能跑，还能响个音乐讲个故事，高级一点的带遥控，孩子玩多了也腻了。想起我们小时候同学做的核桃风车，一个玩具够全班同学玩好多天，这次趁春节假和儿子一起实现一下，也让他了解到自己制作玩具的乐趣，还能随意动手解剖，零距离观察运行原理。核桃风车因为手

2021-02-17 13:50:40 1223

原创使用了antd-mobile的Picker造成点击事件多次触发

使用了antd-mobile的Picker造成点击事件多次触发需求页面上一个显示温度的div(<div className="tem">下称 .tem)，点击时弹框，通过弹框修改这个温度的数据。环境使用 react hooks + antd-mobile，弹框使用 Picker 组件实现显示温度的div如下，其中的子组件<TemPicker >封装了Picker组件。当 .tem 被点击时，手动通过触发这个隐藏的 .itemForPicker 的点击事件来实现弹出。……

2021-02-10 14:44:22 1128

原创 react(含hooks)中同步获取state值的一些方法

环境"dependencies": { "babel-plugin-transform-decorators-legacy": "^1.3.5", "customize-cra": "^1.0.0", "rc-form": "^2.4.11", "react": "^17.0.1", "react-app-rewired": "^2.1.8", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0",

2021-01-17 15:13:57 6464 2

原创第一次使用花小猪有感

今天早上孩子的姥姥要打车去医院，以前都是用滴滴叫车，考虑最近有朋友力荐花小猪，说新用户便宜，我就尝试在微信小程序中打开花小猪，感觉叫车过程和滴滴差不多，但接下来的结果却让我以后再也不想用花小猪了。显示叫上后，我把车牌号和车颜色等信息截图给姥姥，并通过平台给司机留言“乘客是一位老妈妈”等信息。过了一会，我收到司机电话，但似乎信号不好，没法得知姥姥是否上车了，恰好姥姥来电话，我打过去后被挂了，估计是正在上车。大约两分钟后我再打给姥姥，她说她看到那个白车和车牌号了，但车从他前面开过去又掉头开回来，她急忙挡车，

2021-01-13 21:56:18 426

原创 js中数字调用原型上的自定义方法后被包装成对象，typeof换成instanceof解决问题

一年多前用nuxt2.0写的项目，一直正常运行。但最近重新下载依赖后不能正常运行了。回退到前面正常的版本，重新安装依赖，仍然不行，看了看package-lock.json也和以前版本相同。查找不能正常运行的原因，发现是我加载Number原型上的方法被调用时，this变化了，以前是数字，现在变成了一个数字包装的对象。而这里判断数字时用了typeof，经尝试，改为instanceof即可解决问题。/** * 随机取出一个字符或元素 * @param n 随机取出n个元素 * @return.

2021-01-08 22:54:44 115 2

原创 echarts树图tree制作家谱教程

echarts树图tree制作家谱教程缘起国庆节回老家，看到家族里长辈们整理的家谱并印成了一本书，到我这一代已经是第六代了。我辈分低，从小在村里见了跟我爸年龄差不多的人都是爷爷婆婆的叫，但对于这些族人的族内关系却不清楚——从我记事起就没见过很正式的家谱，据说早先有过，但文革时破四旧遗失了，再也没人整理。这次的家谱书比较清晰的记录了每一家在家族中的关系位置和家庭成员信息，对于宗族关系用表格实现，跨了四页。我翻阅时想到如果在电脑上用图表中的树图把家族关系列出来会非常清楚直观，但直到前几天结课才有时.

2021-01-02 19:52:28 6727 16

原创《浮生六记》年表整理

版本信息：《浮生六记》，北京燕山出版社2019年3月出版，任艳红翻译。计算以实岁为准，因芸娘大我十个月，所以芸娘与我按同岁计。书中用虚岁，此处用实岁。部分时间参考了俞平伯先生的《浮生六记》年表我出生于1763年，乾隆28年。3岁，芸娘丧母。12岁，和芸娘订婚，冬天芸娘给我绣鞋，并藏粥给我喝。15岁，跟赵省斋学习时游吼山。16岁，跟赵先生学习时游西湖，西泠桥。17岁，和芸娘结婚。芸娘斋戒结束。婚后一月去杭州跟赵省斋学习，学三个月返回。住沧浪亭，在“我取”轩和芸娘讨论..

2020-12-29 15:59:14 978

原创 css3动画旋转时被切掉一块？

需求圆角半径为50%的按钮里面放一个居中的小图标，当呈现激活状态时给按钮涂上底色并左右旋转一下再停止。问题当按钮被激活后在旋转过程中，仔细观察可发现右边的边缘被切掉一小部分(图上是正常的)，旋转结束后立即回复。观察dom结构，按钮的宽高是固定的，而装载按钮的容器宽度是非常宽的。解决最后一前端女同事大胆尝试，将外面容器的宽度(百分比)减去1像素后，问题解决。原因原因不清楚，因为按钮容器宽度在绘制按钮时根据个数平均分的，最多能容纳4个。实际上放了3个按钮的看起来问题不明显，而

2020-12-25 16:19:40 379

原创 reacthooks中app.js里面useHistory报错：The prop `history` is marked as required in `Router`, but。。。

用reacthooks 重写项目，在使用useHistory时发现写在其他页面正常跳转，而写在app.js里的不正常，报错hook The prop `history` is marked as required in `Router`, but its value is `undefined`打印了一下果然是undefined，仔细对比其他页面，发现路由是定义在app.js中的，所以其他页面相当于是路由的子组件，环境不一样。经查找，app.js中的正确使用方法是：import { c

2020-12-25 15:51:24 1820

原创 react中antd-mobile的组件如Switch阻止冒泡的方法

需求一个卡片，点击跳转卡片上有个切换开关Switch，点击时需要阻止卡片跳转的动作问题Switch的api里只有onChange事件，参数里没有react或原生事件参数解决方案在Switch外面包一层div，在这个div上使用react事件的阻止方法：onClick={e=>e.stopPropagation()}<div className='r' onClick={e=>e.stopPropagation()}> <Switch che

2020-12-25 15:36:12 1549

原创 react脚手架creat react-app创建的项目编译/热更新慢？

新起了一个项目，cra脚手架创建的react，但发现热更新非常慢，一次要五六秒。而几周前同样创建过的一个项目，热更新一次就一两秒钟。对比两个项目，把package.json整个替换了重装依赖，问题依然。最后把yarn.lock文件给替换了，问题解决。猜想问题是依赖的小版本升级造成。...

2020-11-30 15:44:07 1708

原创你的JavaScript代码为什么不写分号？

我希望不写分号，原因有：现代的写法中不会轻易导致代码错误；如果忘记写分号，移动端开发时编译一次需要五六七八秒，然后报个错，感觉浪费时间；视觉上更简洁；符合潮流。有时可能会需要加，比如：以小括号“( )”或中括号“[ ]”开头的语句，可能是解构赋值，也可能是数组使用forEach等操作的时候；团队里喜欢写分号的人需要用到不喜欢写分号人的代码片段，没分号的代码拿过去就容易报错跑不起来，而喜欢分号的人也不愿意修改编译检查规则。...

2020-11-13 13:52:42 1047

原创 lottie升级后报错：lottie.js:6229 Error: ＜svg＞ attribute viewBox: Expected number, “0 0 undefined undefi…

创建新项目，引入原项目的部分代码，发现一个用lottie导入的小图标动画不见了，但这个元素位置大小都对，只是看不见，就像透明度为0了。查看控制台，有报错：lottie.js:6229 Error: <svg> attribute viewBox: Expected number, "0 0 undefined undefi…在源码中查找，位置在lottie.js:6229 行if(this.renderConfig.viewBoxSize) { this.svgEle.

2020-11-10 10:30:18 2687 4

原创 js中调用含有return的函数不能停止运行

比如，需要在某个点击事件中先判断手机是否联网，若断网则弹出提示并停止运行后面的程序。如果将这个功能提取出来再在点击时调用，发现return并没有阻止上层函数的运行。const checkMobileOnline = () => { if (!navigator.onLine) { Toast.info('网络不可用', 2); return }}有个可以变通的方法是在需要停止的子程序中抛出异常，即可停止代码运行：const check.

2020-11-09 10:52:35 2422

原创 MobX6的新写法

更多请移步：https://michel.codes/blogs/mobx6Mobx6之后，写法更简洁，总的来说是不需要再写@observable, @computed, @action等装饰符了,只需在构造函数中引入makeAutoObservable即可。直接上代码对比：MobX6以前import {observable, computed, action, makeObservable} from "mobx"class TodoStore { @observabl.

2020-11-06 10:58:08 2296

原创《React进阶之路》学习笔记

第一篇基础第一章初识ReactES6基础箭头函数的this指向是定义时所在的上下文对象。 function foo(){ this.bar = 1; this.f = a => a + this.bar}// 等价于function foo(){ this.bar = 1; this.f = (fuction (a){ return a + this.bar }).bind(this)} 函数参数作为数组、对象的

2020-11-02 18:47:55 667

原创实战git采坑记录

目录实战git采坑记录1.git代码库pull报错2. git提交时未识别目录(文件夹)的大小写修改，打包时报错路径找不到3. git回退到之前的提交后又后悔了实战git采坑记录1.git代码库pull报错error: Your local changes to the following files would be overwritten by merge解决方案：https://blog.csdn.net/daoke_li/article/details..

2020-10-31 14:58:24 230

原创我的WebStorm眼睁睁看着到期了

今年太忙没有维护开源项目，WebStorm眼睁睁看着到期了，试一下试用，还有二十多天，然后呢？不行先转战微软的vsCode，这个目前流行，正好熟悉一下，年底前有空把《阿洛识字》搞起，再来申请WebStorm。...

2020-09-11 07:26:13 904

原创为什么要使用字体图标iconfont？

上家公司时使用过字体图标，优势明显，现推广给当前公司的同事使用，文章记录如下(以react为例)：引入字体图标iconfont可以提高开发效率和项目的可维护性。优点设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。字体图标缩放不失真，不会变模糊。减少网络请求次数，一个css文件可包.

2020-08-28 18:45:34 1165

原创笔记本状态栏无线图标不显示，无线网列表打不开的解决方案

电脑环境硬件：宏碁笔记本，Aspire E1-471G，光驱换成了ssd固态硬盘系统：windows10企业版 LTSC 尝试时间：2020年7月25日现象右下角没有无线图标显示从控制面板中打开无线网络列表，搜不到任何无线网络此时可以手动连接到无线网络进行上网(方法见后面)试过无效的方法笔记本上无线网卡开关切换、网卡禁用启用、重启任务栏设置 -> 选择哪些图标显示在任务栏列表上，无此选项；打开或关闭系统图标，其中网络开关灰色显示不能点击控制面板中网络重置并重启电脑

2020-07-25 22:48:36 6388 1

原创移动端react/H5开发通过JS捕捉安卓物理返回键的实践

业务需求及要求一共5个页面，页面内有导航栏和返回，其中两个页面的返回有特殊要求，而且物理返回键点击动作要和导航中的返回完全一致。首页——项目一打开在首页，点击某个元素跳转到列表页列表页——可以点击新增跳到表单编辑页，点击草稿可以跳到草稿箱，点击每个图可以跳到详情页；点返回回到首页。详情页——点击编辑可以跳到表单编辑页；表单编辑页——点击保存跳到草稿箱，点击提交跳到列表页；草稿箱——点击每个图片进入表单编辑页；点返回回到列表页。解决过程网查了一下，花了大半天时间尝试了以下方法

2020-06-11 12:36:41 1786

原创珍惜父母健在的时光

作者刘少军昔日我们是懵懂孩童，天真无邪，活泼可爱！转眼间除郭敏外，都也已成家立业，这些年各自为生活劳苦奔波，确实辛苦，也初步体验了人生百态，酸甜苦辣！成长的过程原本就是痛苦的，就想春蚕一样，每长大一次，都会蜕一层皮，是何等的痛苦，破茧成蝶又何尝不痛呢？生活原本是不会一帆风顺，就像人的正常心电图一样，有高峰与低峰、波折，若心电图是直线，那是死亡之人的心电图啊！生活是一棵长满可能的树，没有必要得意忘形或者自怨自艾，因为没有人知道下一刻你到底是身在天堂还是位于地狱，我们能做的，只是平和温雅地接受，然后继.

2020-05-24 07:14:31 523

echarts树图tree制作家谱源码.zip

空空如也