React函数组件中，如何获取原生的DOM对象

在函数组件中，可以使用useRef钩子来创建一个可变的ref对象，这个对象在组件的整个生命周期内保持不变。你可以将这个ref对象绑定到DOM元素上，然后通过ref.current来访问该DOM元素。

以下是一个在函数组件中使用useRef来获取原生DOM对象的示例：

import React, { useRef, useEffect } from 'react';  
  
function MyFunctionComponent() {  
// 创建一个ref来存储DOM元素的引用  
const myRef = useRef(null);  
  
// 在组件挂载后打印DOM元素  
useEffect(() => {  
if (myRef.current) {  
console.log(myRef.current); // 这是原生的DOM对象  
}  
}, []); // 空依赖数组确保effect只运行一次（即组件挂载时）  
  
// 将ref绑定到DOM元素上  
return <div ref={myRef}>Hello, world!</div>;  
}  
  
export default MyFunctionComponent;

在这个例子中，useRef创建了一个ref对象，并将其赋值给myRef变量。然后，在useEffect钩子中，我们检查myRef.current是否存在。如果存在，那么它就是绑定到<div>元素上的原生DOM对象。

需要注意的是，当ref被绑定到一个DOM元素时，myRef.current将指向该元素。如果ref被绑定到一个函数组件的实例，myRef.current将指向该实例。如果ref被绑定到一个类组件的实例，myRef.current也会指向该实例。

此外，即使组件重新渲染，myRef仍然会保持不变，所以你可以安全地在多个effect或回调中使用它。但是，myRef.current的值可能会随着DOM的变化而变化（例如，如果ref被重新绑定到另一个元素）。