最进 React 更新了一个小版本,但是带来了一些比较好用的特性,所以小小的研究了下用法。
Activity
一个新的组件,提供了“冻结”组件的能力,以往想控制一个组件的展示有两种方法,一是直接 if 判断是否渲染,而是 display:none 隐藏,但这两种方式都有各自的缺点。
第一种意味着组件的整体销毁重建,所有的状态(state,DOM)信息全部丢失,第二种则是组件隐藏时仍保持在活跃状态,对于性能的开销,不必要的任务都还会继续执行。
Activity 通过一个 mode=visible|hidden 来控制是否冻结一个组件,当冻结时会执行一遍 useEffect 的清理函数,然后不再执行 useEffect 调用,但是需要注意的是仍然会执行 Re-render,当再次设置为 visible 时,会直接执行 useEffect。
在 hidden 时,执行的 Re-render 被标识为低优先级操作,会在浏览器空闲时间调用,这也同样意味着,可以当作预加载能力来使用。
useEffectEvent
当涉及到事件时,hook 机制很容易出现闭包问题,比如 setTimeout,比如 IntersectionObserver,往往需要依赖 ref 去传递变量或者通过 deps 来做一些操作,但是带来了很大的不便以及冗余性,所以 React 其实一直缺少一个能够确保获取实时变量的方式。
useEffectEvent 打破了以往的依赖链路,它的引用是固定的,内部执行时也总能读到最新的变量。
除此之外,前端好像也没什么新鲜事,一部分去凑了 AI 的热闹,一部分在赶着先上 Rust 拿 KPI,总体感觉安静了许多。