weixin_44891495的博客

原创 王林竟然拿以太坊给婉儿续命

王林可A了，拿着以太坊，去中心化分布式给婉儿续命。

原创 react-spring/web + children not defined

【代码】react-spring/web + children not defined。

原创 react-native 踩坑

Native 的组件（如 View、Text）并非 DOM 元素，且其样式系统与 Web 的 CSS 有本质差异。0%~100% 是动画运动的时常，通过约定多1/4的时间Y轴的位置，来控制动画的停留。于是，我迅速安装了animejs,并自信的写了两种方式。最近流行一句：不会被取代的人是，会使用AI的人。，在短时间内实现我的需求，是有点费事儿的。于是，deepseek 两秒帮我写完了。好吧，从控制台看，我看着是div呀。那translate 总支持吧。😭，只得老老实实的使用。

原创 tenderly初识

礼记有言：良冶之子，必学为裘；良弓之子，必学为箕；始驾马者反之，车在马前。闲来无事，阅读一下tenderly的官网文档，从别人嘴里听来的只言片语终究了解的不够全面。

原创 canvas画网格

假如屏幕宽度➗网格宽度 不是整数。所以canvas 边上的点，需要单独处理一下。看到一个有趣的网站，感觉他们的网格很有意思。使用canvas 来实现一下。

原创 Sonic Layer1

Sonic 说它 是一条性能超快的公链，原因大概总结为“批量处理交易”“节点之间异步通信”。Sonic 说 user 用它的话，S发行6个月后空投总持有量的6%的S给user。空投规则详情请看官方文档，我是以太坊的忠实信徒，先run了）

原创 Expo Router

index.tsx作用：作为所在目录的默认页面。路由：对应父级路径或根路径。details.tsx作用：定义名为 details的页面组件。路由：对应 /details 路径。括号 () ：用于分组，组织代码，不影响路由。下划线 _ ：定义布局，应用于当前及子目录。加号 + ：特殊文件或路由，全局配置或特殊页面。方括号 [] ：动态路由，匹配参数化路径。

原创 css‘s hover VS mobile

为了防止测试再提：“在PC端，点击链接跳转到另一个页面，x掉另一个页面，浏览器窗口又回到当前页面，滚动条不滚动” 添加当该页面出现在浏览器窗口时，就让滚动条滚动。原本写的好好的，测试说：“移动端点击滚动条，跳转到其他页面后，返回当前页面，滚动条不滚动；可以优化位点击后继续滚动”

原创 radix form

讲真的，我不是很习惯这个库，就像radio，值为空的时候，只有required来控制，若写 error 提示，还需借助 onValueChange。让我们一起了解更多便捷方法，缩短开发时间去摸鱼，嘿嘿。来看看它的form表单，验证和错误提示吧。radix ui 这个库用的还挺多。礼记有言：独学而无友，则孤陋而寡闻。

原创 formik 的使用

【代码】formik 的使用。

原创 Zustand浅学习

道阻且长，行而不辍，未来可期之前只是会使用zustand,也没仔细看过zustand的文档，前段时间一个合约朋友问我前端的zustand怎么用，啊，这，是那个笑起来明媚的不像话的帅哥问我问题诶，那我得认真一下下，尽管已是前同事，还是希望他在异国他乡前程锦绣。哈哈哈，知识是用来共享的，也希望能帮到 路过的公主 or 王子。首先看一下Zustand 官方是如何王婆卖瓜的，啊，不，是如何精准的介绍自己的小型、快速且可扩展的 bearbones 状态管理解决方案。

原创 kelp protocol

rsETH 是由 Kelp DAO 发行的流动性重新抵押代币 (LRT)，旨在为存入重新抵押平台（例如 EigenLayer）的非流动性资产提供流动性。

原创 Pendle protocol

pendle protocol 学习

原创 reat scroll full page

react-page-scroller

原创 background:linear-gradient 与其它属性叠加的疑难杂症

background:linear-gradient 与其它属性叠加的疑难杂症

原创 薅熊链Berachain测试网空投

Berachain 是 Layer1 的一条公链。Berachain 的经济模型引入了三种代币在权益证明（Proof-of-Stake）区块链中，治理通证通常用于通过与验证者进行质押来保障网络安全。在Berachain独特的流动性证明（Proof-of-Liquidity）模型中，这一角色由BGT扮演。$BGT不可转让，用户可以通过质押 BERA 来赚取 BGT。稳定币是挂钩法币价值的解决方案，旨在满足数字资产价格稳定的需求。

原创 两数相加 js

道阻且长，行而不辍，未来可期。

原创 防抖和节流

防抖： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。防抖的核心是，通过定时器实现，在规定时间内，频繁触发，只执行最后一次。节流： n 秒内只运行一次，若在 n 秒内重复触发，只有第一次生效。常用在search搜索，用户在不断输入值时，用防抖来节约请求资源。使用场景：滚动加载，加载更多或滚到底部监听。

原创 斐波那契数列 JS

给出一个数字，找出它是斐波那契数列中的第几个数。如果输入数字不存于斐波那契数列中，返回 -1。，后一个数字是前两个数字之和。输入的数字大于等于 2。

原创 jwt的基本介绍

JSON Web Token 简称JWT，在HTTP通信过程中，进行身份认证。/*** 实现流程:* 用户登录,服务器产生一个token(加密字符串)发送给前端,* 前端将token保存(想存哪就存哪)* 前端发起数据请求时携带token* 服务端验证token是否合法,合法继续操作,不合法终止操作* token的使用场景:无状态请求,保持用户的登录状态,第三方登录(token+auth2.0)*///提交表单默认会跳转到新的页面，或者刷新整个页面//1.阻止默认事件。

原创 文件格式转换

把我的悲惨故事说给大家乐呵乐呵：老板让运营把一些数据以json格式给我，当我看到运营在石墨文档上编辑的时候我人都傻了，我理解运营的艰难，可我也是真的难啊，在石墨文档编辑的眼花缭乱的，很多属性都错乱了(诸如把名字赋值给了爱好)。挨个调整半天，这种经历我可不想再来一次，考虑到后续还会使用，我决定写个工具给运营。

原创 git的基本使用

2.远程分支重命名（已经推送远程 - 假设本地分支和远程分支名称相同）拉取远程develop分支代码到本地develop分支。2.删除远程仓库地址, 然后添加新地址。1.本地分支重命名（还没有推到远程）d.把修改后的本地分支与远程分支关联。(1)修改最近一次commit信息。a.重命名远程分支对应的本地分支。(2)修改多次commit信息。假设分支名为oldName。1.直接修改远程仓库的地址。从当前分支切换到其他分支。想要修改为newName。c.上传新命名的本地分支。

原创 useMemo

原创 useCallBack

（当然组件内部的state 和 context 变化也会导致组件重新渲染），但咱们只要将咱们的子组件包裹，便可以保证Child组件在props不变的情况下，不会重新渲染。React.memo 保证了只有props发生变化时，该组件才会重新渲染。

原创 useEffect

2.变量修改后，导致重新render，会先执行useEffect中的return，再执行useEffect内除了return部分代码。使用useEffect创建的变量，当父组件发生变化时，会造成重新render,包括子组件的销毁，子组件的重建，父组件的重建。3.return内的回调，可以用来清理遗留垃圾，比如定时器等占用资源的东西。1.首次渲染，不会执行useEffect中的return。每次重新渲染，都会导致原组件（子组件）的销毁和重建。useEffect是在render结束之后才执行的。

原创 useState

不可变数据就是不可以直接去修改它的值，而是要通过复制他的值，并且产生一个新的对象的方式来得到一个新的数据，这个新的数据包含了你要修改的部分。React无法感知到数组内容的变化，必须使用一个新数组替换旧数组（引用不一样就行，就比如{} {}两个对象虽然都是空的，但是引用不一样）简言之就是不可变数据，不可以直接修改，若要修改，必须对它进行一份复制，无论是浅复制，还是深复制。在JS中，如果往数组里追加一个数据，数组的引用是不会变的，它仍然指向原来的地址。也可以使用扩展运算符，将数组转化为逗号分隔的参数序列，

原创 video标签在安卓手机内置浏览器上的播放问题

道阻且长，行而不辍，未来可期在手机内置浏览上，虽然没有给video标签设置controls,但在内置浏览器上，就是会显示。而且，video一旦自动播放，video的层级就会提升到最前，想设置一个盒子覆盖在上面都做不到，给前端造成了很大的困扰。看了很多相关问题的解决方法，直到看到把video的src设置为blob(视频流）安卓手机的内置浏览器因为认不出数据格式，而不再劫持video标签的渲染。直觉是个好方法，开始动手。下载blob类型的文件：在回调函数中可以这样写完美解决。

原创 react图片预加载

图片预加载的原理：new一个image对象，用这个对象加载图片，等这个对象将这个图片请求完后，再将这个图片放入原本应该放置的位置。道阻且长，行而不辍，未来可期。

原创 countDown+react+hook

因此，使用 requestAnimationFrame 实现的动画或定时器，在页面不可见或失去焦点时会自动暂停，直到页面重新可见或获得焦点时才会继续执行。这是浏览器的默认行为，无需额外处理。需要注意的是，requestAnimationFrame 返回一个标识符（或称为句柄），可以使用该标识符来取消动画帧请求，使用 cancelAnimationFrame 函数进行取消操作。结论：竟测试，从图中确实可以看出，当离开页面的时候，requestAnimationFrame中的代码暂停执行，减少了资源的消耗。

原创 react工程化配置

道阻且长，行而不辍，未来可期。

原创 JS-Map与react-toolkit

如果Map的key的简单类型，只要两个key相等，Map就会将其当成一个键，如果Map的key是复杂类型，则需要地址的引用相等，Map才会将其当成一个键。Object 的 key 必须是简单数据类型（整数，字符串或者是 symbol）Map的key可以是各种类型，包括对象都可以当做key。Map是键值对的集合，Map也实现了iterator接口，所以，可以使用【扩展运算符】和【for…道阻且长，行而不辍，未来可期。所以，手写一个Map。

原创 后端一次性返回十万条数据，前端如何处理(二)

利用鼠标滚轮事件，判断当滚动条触底的时候就加载一堆数据。方法二、盒子滚动触底加载（滚动到底，再加载一堆）完整的demo在dataByScroll分支。道阻且长，行而不辍，未来可期。

原创 后端一次性返回十万条数据，前端如何处理(一)

方法一、将数据分堆，使用定时器，每次渲染一堆，渲染1000次，这样页面就不会卡死了。在这个小demo中懒得写路由了，就添加一个按钮，用来演示如何清除定时器吧。缺点：例如：切换路由的时候，需要清除定时器，以免造成内存泄漏。完整代码在github仓库，data分支中。道阻且长，行而不辍，未来可期。

原创 wagmi的基本使用方法

wagmi的基本使用

原创 React Tree结构Demo

react tree 结构

原创 前端批量导出图片并打包压缩

批量下载并打包

原创 原生input上传图片

input上传图片

原创 解决自定义 Antd Form 表单控件 获取值的问题

antd form表单控件获取值的问题

原创 前端调用Aptos钱包的基本用法二

apto的基本用法

原创 前端调用Aptos钱包的基本用法一

Aptos钱包