React 系列：useState 与 useRef

刚开始时，usestate 及其所有怪癖可能会让人不知所措。现在将 useref 加入其中，您的大脑就会爆炸。

我认为更深入地研究 useRef 与 useState 的技术细节会很有帮助，因为工程师通常很难理解它们之间的差异以及何时选择其中一个。

这是我对每一个的定义，粗略且明显过于简单化：

useState 是一个钩子，可让您访问和更新值，从而触发重新渲染。 useRef 是一个钩子，可以让你引用渲染不需要的值。

您可能会问自己，为什么了解这些内容带来的好处很重要？好吧，您可能会想将 useState 应用于所有内容，仅仅因为它确实有效。

是的，但是，您的应用程序变得越复杂，组件将状态属性向下传递 5 个级别，并在此过程中触发一堆不必要的更新，您可能会比您想象的更早开始遇到性能问题。

许多开发人员的另一个误解是认为 useRef 只能操作和访问 DOM 元素，这很遗憾，因为你们都错过了 useRef 可以做的其他 99 件事。

让我们从 useState 开始吧！现在请竖起耳朵，我亲爱的开发者 ʕ◉ᴥ◉ʔ

✨ 使用状态

useState 是一种强大但简单的方法，可以在变量值发生变化时更新视图，它使最新值与屏幕保持同步，而无需我们手动执行任何操作。声明语法如下 const [memesILiked, setMemesILiked] = useState(9000).

现在，让我们讨论一下当您使用 useState 执行操作时会发生什么。

更新状态值会触发重新渲染，正如您可能想象的那样，重新渲染视图对于浏览器来说是一个非常昂贵的操作。以下是 React 和浏览器如何结合运行以确保您的应用程序得到更新：

事件触发器
1. ：事件触发状态更新。单击、计时器或其他任何东西。
State Update
2. ：调用 setState 并安排组件的更新，该组件被标记为“脏”（需要重新渲染）。
协调阶段
3. ：React 开始新虚拟 DOM 和旧虚拟 DOM 之间的协调。它递归地重新渲染组件及其所有子组件。
检查差异
4. ：React 将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较。更改存储在要应用于真实 DOM 的更新列表中。
渲染阶段
5. ：使用新状态调用渲染方法或函数组件。
提交阶段
6. ：React 将 diff 过程中的更改应用到真实 DOM。
更新 DOM
7. ：更新真实的 DOM 以反映新状态。浏览器重新绘制 DOM，视觉上更新 UI。
渲染后效果
8. ：调用组件重新渲染后计划运行的任何效果。这包括使用渲染期间更改的依赖项注册的 useEffect 挂钩。

唷

，这有很多东西......虽然上述过程确保您的 UI 与应用程序状态保持同步，但它也强调了为什么过多或不必要的重新渲染会导致性能问题。幸运的是，React 提供了多种策略和工具来帮助优化此过程，例如 useMemo 和 useCallback，但这超出了本文的范围！ 总而言之，useState 是一个非常方便的 hook，如果使用得当，它可以为用户提供很好的体验。以主题切换为例。借助 useState，您可以轻松地在浅色和深色模式之间切换，让您的用户立即满意地看到应用程序根据他们的喜好进行转换。

✨

useRef

现在，我们来谈谈 useRef。 useState 的作用是在状态改变时触发重新渲染，而 useRef 就像一个安静的观察者，永远不想引起别人的注意。它非常适合存储可变值，这些值更改时不需要重新渲染。语法看起来像 const memeRef = useRef(null).

useRef 最常用于直接访问 DOM 元素。例如，如果您需要以编程方式聚焦输入字段，则 useRef 可以保存对该元素的引用。但 useRef 的功能不仅仅限于 DOM 访问。它还可以存储

任何

可变值！我的朋友们，这就是神奇发生的地方???（无论如何在我看来）。 这样想：useRef 是一种在渲染过程中

持久保存值

而不触发重新渲染的方法。这使得它非常适合存储计时器、计数器甚至组件的先前状态等数据。与 useState 不同，更新 ref 不会通知 React 重新渲染您的组件。它只是静静地更新价值并继续其业务。 这是一个实际的例子：假设您想要实现一个简单的计数器，但您不希望每次增加计数器时 UI 都会更新。您可以使用 useRef 来存储计数器值。计数器会按预期增加，但由于组件不关心此引用值以进行渲染，因此不会发生重新渲染。

useRef 在保留状态的最新值而不引起额外渲染方面也很有用。例如，如果您使用

interval

来更新值，但您不希望该值每毫秒触发一次重新渲染，则 useRef 是您的首选工具。它允许值在后台更改，保持 UI 响应并避免不必要的重新渲染。 总而言之，useRef 最适合用于：

访问 DOM 元素
• ：经典用例，例如聚焦输入字段。
存储可变值
• ：不需要重新渲染，例如计时器或之前的值。
跨渲染保持值
• ：不会导致重新渲染，保持 UI 流畅高效。

既然您

希望

理解了其中的区别（如果我正确地履行了我的职责），那么让我们深入研究一些不那么常见的用例。我将更多地关注 useRef ，因为我觉得它是这里的无名英雄。

1. 跟踪组件挂载状态

   ：useRef 可用于跟踪组件是否挂载或卸载，这对于避免卸载后状态更新很有用。

2. 保存静态值

   ：对于存储在渲染之间不会更改的静态值（例如常量或缓存值），useRef 比 useState 更有效。

3. 防止重新初始化

   ：如果你想阻止一段代码重新运行每个渲染（例如，初始化WebSocket连接）。

4. 存储之前的回调

   ：如果需要保留之前的回调函数的引用，useRef 可以存储之前的函数引用，而不影响组件的渲染周期。

5. 引用计时器 ID

   ：使用计时器（如 setTimeout 或 setInterval）时，将计时器 ID 存储在 useRef 中，以避免每次设置或清除计时器时触发重新渲染。

6. 触发动画

   ：对于强制触发动画（如 CSS 过渡或滚动动画），useRef 可用于直接与 DOM 元素交互，而不会导致重新渲染。

✨

结论

虽然 useState 对于管理和响应应触发重新渲染的状态更改至关重要，但 useRef 是一个沉默的伙伴，可以帮助您在不中断 UI 的情况下管理状态。

知道何时使用它们可以帮助您避免潜在的性能问题，并使您的 React 应用程序更加高效和可维护！

感谢您的阅读，如果您成功了，请举起爪子，击掌五！ ⊹⋛⋋( ?????)⋌⋚⊹

脚注：

1 明显夸张了。 ² 我有点戏剧化，以防你看不出来。