在 React 中，我们通常使用虚拟 DOM 来操作页面元素。但有时候我们需要直接获取真实的 DOM 元素，比如要操作 canvas 或者视频等元素。这时候，我们可以使用 ref 来获取真实的 DOM 元素。
什么是 ref
ref 是 React 提供的一个属性，用于在组件中获取真实的 DOM 元素。ref 可以是一个字符串、一个函数或者一个对象。
- 字符串：当 ref 是一个字符串时，React 会使用 document.querySelector() 方法在组件渲染之后找到匹配的元素。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
----- ---- - ----------------------------------
------------------
-
-------- -
------ ---- ------------------ -------------
-
-- 函数：当 ref 是一个函数时，React 会在组件渲染之后调用该函数，并将真实的 DOM 元素作为参数传递给函数。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
-------------------------
-
-------- -
------ ---- --------- -- ------------ - ------------- -------------
-
-- 对象：当 ref 是一个对象时，React 会在组件渲染之后将真实的 DOM 元素挂载到该对象的 current 属性上。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
------------------- -
--------------------------------
-
-------- -
------ ---- ----------------------- -------------
-
-如何使用 ref
使用 ref 有两种常见的方式：一种是在类组件中使用，一种是在函数组件中使用。
在类组件中使用 ref
在类组件中使用 ref，可以使用字符串、函数或者对象三种方式。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
----------- - -----
---------- - ------------------
-
------------------- -
-------------------------
--------------------------------
-
----------- - -- -- -
-------------------------
--------------------------------
--
-------- -
------ -
-----
---- --------- -- ------------ - ------------- ------------
---- ----------------------- ------------
---- ------------------- ------------
------- -------------------------------- -----------
------
--
-
-在上面的代码中，我们分别使用了字符串、函数和对象三种方式来定义 ref。在 componentDidMount 方法和 handleClick 方法中，我们都可以通过 ref 获取真实的 DOM 元素。
在函数组件中使用 ref
在函数组件中使用 ref，只能使用对象方式。
-- -------------------- ---- -------
-------- ------------------ -
----- ----- - -------------------
------------------ -- -
---------------------------
-- ----
------ ---- ------------------ -------------
-在上面的代码中，我们使用了 React.useRef() 方法来创建 ref。在 useEffect 方法中，我们可以获取真实的 DOM 元素。
总结
使用 ref 可以方便地获取真实的 DOM 元素，以便我们进行一些底层操作。但是，需要注意的是，在大多数情况下，我们应该尽量避免直接操作 DOM 元素，而应该使用 React 提供的组件和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e8bd695b1f8cacd7a87b6