整新小窝后台,优化输入性能未遂 / 直播答疑

2021-10-30 · 周六郁闷

今天本来是想去深圳浪一下找几位在外漂泊的同学玩的,结果最终败在了公司明早的例会上。为了开会进行演示必须要带电脑,但一个人带上电脑就显得不太安全了。

去深圳容易,回来就不好说了。晚上都没有船/车可以回珠海,只能是在网约车平台上约顺风车,有着太多的不确定性。所以我就一直拖延时间,最后躺在床上错过了最后一班船的时间,彻底放弃了想法。

既然都放弃了那还得做点事情,于是我就继续整我的新小窝后台,顺利从 Preact 迁移回 React 了。唯独就是输入框的 onBlur 和 Preact 行为不一致,只能换成 onChange,主要是感觉 onChange 输入一下就执行一次,感觉性能会比较差,就想着有没有什么办法换成 onBlur 设置状态。

最后我还是搞出来了,用 useRef 获取 value 值,再用 onBlur 执行回调,但这样的缺点就是 Input 元素无法使用 value 绑定,只能是 defaultValue,而它又不可以绑定 State 的更新,会出现切换日记后内容不刷新的现象。于是我用了 useEffect 去设置 value 值。

这样做看似确实可以了,但会造成页面卸载的时候,拿不到正确的 value,而是上一次修改前的(onBlur 只有离开输入框之后才写 State,而 State 又是异步的,以立马点击保存的方式离开输入框就会触发),直接影响到了误触离开页面的「日记内容自动存档」功能。这就是个特别尴尬的情况,看起来还是得老老实实用回 value + onChange 了。

直播过程基本没有几位观众,但群里 @杰少 同学提到自己网站的 Cookie 设置有问题,于是我就在直播里面做了一个详解。Cookie 唯一性主要是根据 Domain 和 Path 两个字段,之前 Domain 的坑我就踩过(详见 服务端和客户端设置 Cookie 的坑 这篇日记),他写的登录页面有重定向,就是因为没有专门设置 Path,才导致切换页面之后 Cookie 失效。

前端默认可以对所有 Cookie 做修改,但只要加入 HttpOnly 头就可以避免客户端获取。想让客户端知道 Cookie 失效,我的办法就是附加一个没有有效数据的 Cookie,设置和 Token 相同的 Expires 过期时间,就可以了。

Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君