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

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 过期时间,就可以了。

郁闷
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君