React Compiler 进阶: useRef 也可以被淘汰啦

文摘 2024-08-07 10:56 广东

React Compiler 是 React 官方团队提供的通过自动缓存的方式来优化性能的重要手段。他可以做到元素级别的细粒度更新。对于 React 性能优化掌握得不太好的小伙伴来说，这无疑是开发利器。

在刚开始接触 React Compiler 时，我明确表示了自己对于 Compiler 的抵触心理。这一抵触心里来源于对于 Compiler 的出现，到底会对代码逻辑造成什么样的影响的不可控性。

好在没过多久，我就彻底拿捏了 Compiler，对其工作原理有了比较深入的理解。当掌握了它之后，我对他的观念发生了转变，这确实非常好用。React Compiler 的侵入性非常弱，他对我们之前的代码逻辑几乎不会造成太大的影响，并且，我们可以拥有更好的开发体验。

在这个基础之上，我得出一个结论就是：useRef、useCallback、useMemo 都可以直接淘汰了。 我们的代码可以在保持优雅的同时，具备更好的性能。

具体的工作原理，大家可以通过查看这篇文章阅读

本文主要为大家介绍一下，弃用了这些hook 之后，在代码中的具体表示是什么样的。

✓
React Compiler 并非 React 19 的专属，在我的付费小册《React 19》中专门为大家提供了如何在低版本中使用 Compiler 的方法，点击文末阅读原文，可查看详情购买学习

React Compiler 会尝试缓存函数组件中声明或者存在的所有值。

这里的所有值，包括基础数据类型

let base = 20

引用数据类型，一个对象、一个函数等

const mp = {}

function handler() {}

还包括 jsx。在 React 中，jsx 也是值的一种。

<div>b: {b}</div>

由于默认被缓存，我们可以默认所有的引用类型，引用都是稳定不变的。因此，在这个前提之下，useMemo 也就可以不需要用了。

例如一个耗时计算，在之前我们使用 useMemo

// 之前
const d = useMemo(() => {
  const s = performance.now()
  while (performance.now() - s < 1000) {
    //
  }
  return 20
}, [])

function cal() {
  const s = performance.now()
  while (performance.now() - s < 1000) {
    //
  }
  return 20
}

const d = cal()

同样的道理，我们之前使用的 useCallback 也可以不再使用了

// 之前
const handler = useCallback(() => {}, [])

// 现在
const handler = () => {}

如果在函数中，存在前置的依赖条件，我们也不需要担心，Compiler 会自动识别依赖项，并在依赖项更新时重新创建函数

// 之前
const handler = useCallback(() => {
  ...
}, [counter])

// 现在
const handler = () => {
  ...
}

我们要记住的是，缓存的是一个引用，因此，当我们声明一个引用数据类型时，具体的表现是，引用类型的引用不会被改变，但是里面的值可以被改变。

const a = {value: 20}

我们可以再其他操作中修改 a.value 的值，代码如下

function handler() {
  a.value +=  1
  setB(b + 1)
  console.log('a.value: ', a.value)
}

演示效果为

有了这个效果之后，我们就可以完整的使用如下方式替代 useRef

基础数据类型的转化

// 现在
+ const a = {current: 20}

// 以前
- const a = useRef(20)

这样做的好处就是使用更透明与自由，不需要遵循额外的规则。当我们要缓存的本身就是对象时，会更简单直接。

// 以前
const mp = useRef({ title: 1, text: 'hello woled' })

mp.current.title

// 现在
const mp = { title: 1, text: 'hello woled' }

mp.title

基础数据类型也可以被缓存

let base = 20

但是需要注意的是，如果我们在交互的过程中，修改了这个值，修改之后的值不会被缓存。这和基础数据类型的不可变性有直接的关系，使用时一定要注意。

let base = 20

// 点击时 修改 base
function handler() {
  a.value +=  1
  setB(b + 1)
  base = base + 1
}

console.log('base: ', base)

演示效果如下

因此，如果你要使用修改之后的值，请务必将基础数据类型转换为引用数据类型

let base = {value: 20}

当然，你也可以搞一点恶趣味，封装一个 ref 来使用

function ref(value) {
  return {value}
}

他的用法就变成了与 vue 的 ref 一样的方式，只是不具备响应性，只是一个普通数据。

const a = ref(20)

a.value +=  1

React Compiler 通过缓存一切的方式，做到了元素级别的细粒度更新，他可以很聪明的识别用最合适的方式缓存和更新值，因此，我们可以在项目中放心大胆的使用它，它对于现有逻辑的影响非常小。

少数的影响就是本文中所提到的这种差别，由于一切的值都会被缓存，因此之前的某些你不想被缓存的值也会被缓存下来，从而造成逻辑上有一些细微的差异，透彻理解本文内容可以很容易把这些差异找出来并修改掉。因此总的来说，React Compiler 是一款开发中的利器！值得每个人拥有。

目前在我使用的经验来看，它的稳定性也非常好。我的几个项目都使用了它。值得入手尝试。