- 博客(122)
- 收藏
- 关注
RSS订阅原创 react高阶组件：如何同时兼容class类组件和函数式组件。
方案2： 可以封一个 jsx的组件，假如名为<Share>。返回一个<><>,在每个页面render或者 return里面引用<Share>每个页面都要实现分享功能，但是页面有些是用class类，有些又直接是函数式。方案1： 写2套方法。（维护不太好，改要改2遍）通过判断组件的类型，继承不同的原型。
2024-03-06 13:44:29
346
原创 react父组件调用子组件的方法
在父组件中定义了一个handleClickChild()方法，用于调用子组件的handleClick()方法。在这个例子中，我们使用useImperativeHandle() Hook将子组件的handleClick()方法暴露给父组件，以便父组件可以调用它。在这个例子中，我们在handleClickChild()方法中调用子组件的handleClick()方法。通过以上步骤，就可以在函数式组件中使用React Hooks来实现父组件调用子组件的方法。
2024-03-06 13:38:25
448
原创 react-hooks的节流与闭包，以及useCallback的用处
useThrottle: 封装了一个节流的hookuseCallback的作用（性能优化）不用Hook封装节流方法的情况，看是怎么形成闭包的：
2022-11-15 17:41:05
1083
原创 【前端性能优化摸索】浏览器发起的网络请求，经历了哪些阶段以及该如何优化
一、发起的网络请求，经历了哪些阶段以及该如何优化我们从开发者工具的network就可以清楚的看到每个请求的时长，以及网页加载的情况。 Stalled:是浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。 queueing完后开始Stalled,上图Stalled所用时间为6.45ms。 Proxy negotiation:代理协商所用时间。 上图所用时间为..
2022-05-28 14:09:34
685
原创 CSS制作按钮扫光效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3制作按钮扫光效果</title><style type="text/css">/**logo扫光效果CSS**/.site-logo{ position: relative; overflow: hidden; float:left; max-height.
2022-05-23 11:20:47
1141
原创 [小程序]- 列表左滑置顶删除功能
一、效果【wxml】 <view wx:if="{{msgGroup.length > 0}}"> <message-box pType="im" data="{{item}}" wx:for="{{msgGroup}}" wx:key="{{item.groupID}}" bind:touchS="touchS" bind:touchE="touchE" bind:touchM="touchM" leftRange="{{leftRange}}" star
2022-04-25 18:17:06
320
原创 [react-testing-libary测试用例工具]
[一] 联合类型与可选属性Partial<T> : 可以将属性都设置为可选的type ButtonOwnProps = IButtonProps & React.ButtonHTMLAttributes<HTMLElement>;type AnchorOwnProps = IButtonProps & React.ButtonHTMLAttributes<HTMLElement>;export type ButtonCoverProps =
2021-07-31 23:17:11
266
原创 [mobx]入门学习：API的理解和mobx-react在hooks的demo
一、[前导]class类语义用原型链实现继承:function Animal(){} //父类function Dog(){} //子类/**根据原型链 dog._proto_ === Animal.prototype Dog.proptotype._proto_ === Animal.prototype**///--->实现继承(但是Dog.prototype.constructor指向的是Animal）Dog.prototype = Object.creat
2021-07-12 17:26:56
367
原创 前端基础&进阶学习笔记（持续更新）
【一】Immerimmer 是一个用 C ++ 编写的可持久化和不可更改的数据结构库。 可持久化意味着修改数据结构时，将保留旧值。 不可更改意味着所有的操作方法都是 const。 对象不会在适当位置修改，但会返回新值。 因为旧值仍然存在并且永远不会改变，所以新值可以透明地保持对它的公共部分的引用。 这个属性被称为结构共享。.....................
2021-06-15 16:19:55
352
1
转载 【react-hook】useEffect与useLayoutEffect及componentDidMount的关系
参考大佬的文章：https://www.jianshu.com/p/5296c5acf788摘要：在React通知到Renderer渲染器后，渲染器又分了三个子阶段来处理：beforeMutation阶段（渲染视图前） mutation阶段（渲染试图） layout阶段（渲染视图后）渲染器会在mutation阶段完成后， 在layout阶段同步的调用useLayoutEffect，在子组件嵌套中于是如此。在类组件中，调用的是componentDidMount生命周期函数。也就是说，在use
2021-05-17 23:16:10
1875
原创 【容错笔记】js/css/react等(持续记录)
目录一.关于css中的positionposition的绝对定位一定是根据设置了相对定位的父元素进行定位的吗？实验：总结：根据代码，可以看到，黑色盒子和紫色盒子是兄弟盒子，而将紫色盒子设置了position:absolute，而目前没有明确的父盒子，它就会去找离它最近的一个已定位的盒子进行定位的（默认是body）。然后紫色盒子里面，放了一个黄色的盒子，和设置了position:absolute定位的灰色盒子。可以看到，及时紫色盒子没有设置position:relative，灰色.
2021-05-14 15:11:54
190
1
原创 【React】react-hook中useEffect第二个参数的意义
转载大佬的文章:https://www.jianshu.com/p/6e525c3686ab1.你可以把useEffect函数看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。2.默认情况下，它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。...
2021-04-25 17:33:23
1646
原创 使用百度地图API的相关技术目录：创建覆盖物，定位到当前位置...（持续更新）
如何定位到当前位置： <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.
2021-04-18 02:24:34
572
原创 【git报错】Failed to connect to github.com port 443: Timed out
解决办法：git config --global --unset http.proxygit config --global --unset https.proxy
2021-04-09 21:57:52
268
原创 【高德地图api】输入地点名称定位坐标，并放大地图级别
效果：代码：<div class="street-map-search-warp layui-hide"> <div style="width: 100%;height: 38px;"> <input class="layui-input street-map-search-input" id="street-map-search-input" placeholder="输入名称，快速定位地图中心坐标" >
2021-04-08 14:54:22
4117
原创 【git】克隆GitHub上的项目，并在本地和远程新建分支
一.在本地新建一个空文件夹，然后右键选择git bash here,打开git命令行。二.复制你要克隆的地址，然后输入 git clone xxxxx三,可以看到你本地的文件夹已经出现一个新的项目文件夹了。四，然后在本地新建分支。cd xxx 定位到该项目文件上git branch 查看本地分支情况 （可以看到本地就一个 master分支）git checkout -b dev 在本地新建一个分支，名称叫devgit branch 查看本地分...
2021-04-07 11:41:13
1154
原创 【算法3】遍历双重数组，得到根据索引相加的值为一个新数组
要求：得到从第一到第三类的value值里纵向相加的和，为一个新数组。 /*示例数据*/vardataObj={ data:[ {name:"第一类",value:[0,0,1,2]}, {name:"第二类",value:[3,5,2,2]}, {name:"第三类",value:[2,4,1,5]}, ], date:["2021-02-2...
2021-03-24 10:10:46
479
原创 正则判断字符串中的值必须为数字
/*判断字符串中的值必须为数字*/function isNumber(val) { var regPos = /^\d+(\.\d+)?$/; //非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数 if(regPos.test(val) || regNeg.test(val)) { retu.
2021-03-12 16:08:04
2011
原创 【laydate】限定时间，从当前日期开始(年月日)
代码： //时间控件 laydate.render({ elem:"#operation_time", min: getDate(), });var dateFmt = 'YYYY-mm-dd';//获取当前日期function getDate() { return dateFormat(dateFmt);}..
2021-03-10 11:37:31
619
原创 【echarts】legend的图标的样式总结
图标样式有：circle，rect,line，roundRect，triangle，diamond，pin，arrow，none（一）rect（二）circle（三）line（四）pin（五）triangle（六）roundRect（七）diamond（八）arrow（九）none...
2021-02-23 16:07:43
4462
原创 【小程序】input输入框，输入连续的两个1，变成2
小程序官网：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
2021-02-20 16:02:42
314
转载 前端资源汇总
转载：https://segmentfault.com/a/1190000003011977?utm_source=sf-related
2021-01-08 15:32:02
98
原创 【layui/layuimini】在其中一个页面，通过a标签跳转到另一个页面，新开一个窗口，并且在框架内打开
【调用方法】//跳转到【工作管理】--人员管理页面 function navigateToTeamPersonModule() { window.parent.layui.element.tabAdd('layuiminiTab', { tabId: "/page/team-person", href: "/page/team-person", title
2020-12-31 14:49:29
10199
原创 如果获取token?
Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。 基于 Token 的身份验证使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。流程是这样的： 客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收到 Tok
2020-12-25 11:30:43
9161
原创 【map对象】语法规范与实例理解
一.ES6的map集合,用法可以看腾讯手册：https://cloud.tencent.com/developer/section/1191813二、常用属性与方法三、实例
2020-11-11 17:35:37
93
原创 [echarts图]:设置柱状图的Y轴滚动条+效果图
效果：代码：html:<div class="layui-col-md12" id="echart-tsrqlxtj" style="height:100%"></div>JS: (滚动条属性)dataZoom: [ { start:0,//默认为0 end: 100,//默认为100 type: 'slider', ...
2020-11-05 14:54:16
8110
2
原创 正则：判断日期的先后
效果：修订日期必须大于编制日期：//编辑表单 form.on('submit(plan-form-edit)', function(obj){ var field = obj.field; var st = field.organization_date.replace(/\-/g, "\/"); var ed = field.revise_date.replace(/\-/g, "\/"); if (ed != "" &
2020-11-04 14:22:12
300
原创 echarts横向条形图的Y轴文字太长，做字数限制处理
/** * 统计条形图（横向滚动的情况) * @param id * @param data [{key:val,key:val...}] * @param color ['rgba(12,12,12,0)','rgba(12,12,12,1)','rgba(12,12,12,0.1)'] 开始颜色，结束颜色，背景色 */function activityBarChartScroll(id,data,color){ if (!id) { return; } var .
2020-11-04 10:45:38
2960
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人