刚开始时，usestate 及其所有怪癖可能会让人不知所措。现在将 useref 加入其中，您的大脑就会爆炸。
我认为更深入地研究 useRef 与 useState 的技术细节会很有帮助，因为工程师通常很难理解它们之间的差异以及何时选择其中一个。
这是我对每一个的定义，粗略且明显过于简单化：
useState 是一个钩子，可让您访问和更新值，从而触发重新渲染。useRef 是一个钩子，可以让你引用渲染不需要的值。
您可能会问自己，为什么了解这些内容带来的好处很重要？好吧，您可能会想将 useState 应用于所有内容，仅仅因为它确实有效。
是的，但是，您的应用程序变得越复杂，组件将状态属性向下传递 5 个级别，并在此过程中触发一堆不必要的更新，您可能会比您想象的更早开始遇到性能问题。
许多开发人员的另一个误解是认为 useRef 只能操作和访问 DOM 元素，这很遗憾，因为你们都错过了 useRef 可以做的其他 99 件事。
让我们从 useState 开始吧！现在请竖起耳朵，我亲爱的开发者 ʕ◉ᴥ◉ʔ
✨ 使用状态
useState 是一种强大但简单的方法，可以在变量值发生变化时更新视图，它使最新值与屏幕保持同步，而无需我们手动执行任何操作。声明语法如下 const [memesILiked, setMemesILiked] = useState(9000).
现在，让我们讨论一下当您使用 useState 执行操作时会发生什么。
更新状态值会触发重新渲染，正如您可能想象的那样，重新渲染视图对于浏览器来说是一个非常昂贵的操作。以下是 React 和浏览器如何结合运行以确保您的应用程序得到更新：
事件触发器：事件触发状态更新。单击、计时器或其他任何东西。 State Update：调用 setState 并安排组件的更新，该组件被标记为“脏”（需要重新渲染）。协调阶段：React 开始新虚拟 DOM 和旧虚拟 DOM 之间的协调。它递归地重新渲染组件及其所有子组件。检查差异：React 将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较。更改存储在要应用于真实 DOM 的更新列表中。渲染阶段：使用新状态调用渲染方法或函数组件。提交阶段：React 将 diff 过程中的更改应用到真实 DOM。 更新 DOM：更新真实的 DOM 以反映新状态。浏览器重新绘制 DOM，视觉上更新 UI。渲染后效果：调用组件重新渲染后计划运行的任何效果。这包括使用渲染期间更改的依赖项注册的 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 ，因为我觉得它是这里的无名英雄。
跟踪组件挂载状态
：useRef 可用于跟踪组件是否挂载或卸载，这对于避免卸载后状态更新很有用。
保存静态值
：对于存储在渲染之间不会更改的静态值（例如常量或缓存值），useRef 比 useState 更有效。
防止重新初始化
：如果你想阻止一段代码重新运行每个渲染（例如，初始化WebSocket连接）。
存储之前的回调
：如果需要保留之前的回调函数的引用，useRef 可以存储之前的函数引用，而不影响组件的渲染周期。
引用计时器 ID
：使用计时器（如 setTimeout 或 setInterval）时，将计时器 ID 存储在 useRef 中，以避免每次设置或清除计时器时触发重新渲染。
触发动画
：对于强制触发动画（如 CSS 过渡或滚动动画），useRef 可用于直接与 DOM 元素交互，而不会导致重新渲染。
✨ 结论
虽然 useState 对于管理和响应应触发重新渲染的状态更改至关重要，但 useRef 是一个沉默的伙伴，可以帮助您在不中断 UI 的情况下管理状态。
知道何时使用它们可以帮助您避免潜在的性能问题，并使您的 React 应用程序更加高效和可维护！
感谢您的阅读，如果您成功了，请举起爪子，击掌五！ ⊹⋛⋋( ?????)⋌⋚⊹
脚注：
1 明显夸张了。² 我有点戏剧化，以防你看不出来。
以上就是React 系列：useState 与 useRef的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490590.html
微信扫一扫 
支付宝扫一扫 
