React中的refs是什么？
文章概要:
- 为什么我们需要在 React 中访问 DOM?
- refs 如何帮助我们实现访问 DOM?
- 什么是 useRef、forwardRef 和 useImperativeHandle 钩子?
- 如何正确使用它们?
写在前面
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。
而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
让我们来看看为什么我们首先想要访问 DOM，ref 如何帮助我们做到这一点，什么是 useRef、forwardRef 和 useImperativeHandle，以及如何正确使用它们。
此外，让我们研究如何避免使用 forwardRef 和 useImperativeHandle，同时仍然保留它们给我们提供的功能。
如果你曾经尝试弄清楚它们是如何工作的，你就会明白我们为什么想要这样做,另外，我们将学习如何在 React 中实现命令式 API！