成都网站建设公司是什么意思自建企业网站

useRef() 是 React 提供的一个 Hook，用来创建一个可变的“容器”，它可以存储一个可变的值，并且这个值的改变不会引起组件重新渲染。

1、useRef 和 useState 的区别

特点	useRef	useState
值是否引发渲染	否	是
用途	保存可变值或 DOM 引用	保存状态，用来驱动界面渲染
修改方式	直接赋值 ref.current = ...	用 setter 函数，如 setState

2、为什么说是通过 ref 访问真实 DOM 元素

• 1. 什么是真实 DOM 元素？

  • 真实 DOM 元素就是浏览器里渲染的 HTML 元素，比如

    、 这些，JS 通过 document.getElementById() 等方式可以拿到它们。

  • React 把 JSX 转换成真实 DOM 渲染到页面上。

• 2. ref 的作用

  • React 中，ref 用来“获取”这些真实 DOM 元素的引用，方便你直接操作 DOM，比如聚焦输入框、测量大小、调用原生方法等。

  • React 渲染后，会自动把对应的 DOM 节点赋值给你传入的 ref.current。

function MyInput() {const inputRef = React.useRef(null);React.useEffect(() => {// 组件挂载后，inputRef.current 就是 <input> 的真实 DOMinputRef.current.focus();  // 让输入框自动获得焦点}, []);return <input ref={inputRef} />;
}
这里：
inputRef.current 是真实的 <input> DOM 元素。
你可以直接调用 DOM 原生方法，比如 focus()。

const [show, setShow] = useState(false);
function showNotice() {setShow(true);}function closeNotice() {setShow(false);}
//系统方法暴露给父组件useImperativeHandle(cRef, () => ({showNotice: showNotice,closeNotice: closeNotice,}));<Modalref={cRef}isOpen={show}/>

简单总结

• useRef() 用来创建一个在组件整个生命周期中持续存在的可变引用。
• 修改 .current 不会引起组件重渲染。
• 既可以拿来存 DOM 节点，也可以存任意数据。