首页 > web前端 > js教程 > React 系列:useState 与 useRef

React 系列:useState 与 useRef

WBOY
发布: 2024-08-21 06:06:02
原创
489 人浏览过

当你开始使用时,useState 及其所有怪癖可能已经足够令人难以承受。现在将 useRef 加入其中,您的大脑就会爆炸。

React Series: useState vs useRef


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

以下是我对每个内容的定义,粗略且明显过于简单化:

useState 是一个钩子,可让您访问和更新值,从而触发重新渲染。

useRef 是一个钩子,可让您引用渲染不需要的值


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

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

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

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


useState

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

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

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

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

,有很多东西...虽然上述过程确保您的 UI 与应用程序状态保持同步,但它也强调了为什么过多或不必要的重新渲染会导致性能问题。幸运的是,React 提供了多种策略和工具来帮助优化此过程,例如 useMemouseCallback,但这超出了本文的范围!

总而言之,useState 是一个非常方便的钩子,如果使用得当,它可以为用户提供良好的体验。以主题切换为例。借助 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 显然是夸张了。
² 我有点戏剧化,以防你看不出来。

React Series: useState vs useRef

以上是React 系列:useState 与 useRef的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板