React Refs: 从访问 DOM 到命令式 API

摘要

React 一个美妙之处在于它通过抽象降低了操作真实 DOM 的复杂度。这让我们不必手动去查询元素，也不必思考如何向这些元素添加类，也不必再苦于浏览器的不一致性，而是让我们专心编写组件并专注于用户体验。然而，仍然会有一些场景（虽然很少！）需要我们访问 DOM。

而当涉及到 DOM 时，最重要的是理解并学习如何正确使用 Ref 以及它的周边。因此在本文中，我们要弄清楚为什么需要访问 DOM、Ref 如何帮助我们实现这一点、useRef、forwardRef 和 useImperativeHandle 是什么，以及如何正确使用它们。此外，我们还要讨论如何避免使用 forwardRef 和 useImperativeHandle，但是同时还要拥有它们提供的能力。