掌握 React 的 useRef Hook：使用 DOM 和可变值

React 中的 useRef Hook

useRef 钩子是一个内置的 React 钩子，用于在渲染之间保留值而不导致重新渲染。它通常用于直接与 DOM 元素 交互，并存储需要在渲染之间保留但不一定需要触发重新渲染的值。

---

什么是useRef？

useRef 钩子主要用于两个目的：

1. 访问 DOM 元素：它提供了一种直接引用 DOM 节点或 React 元素的方法，允许您以命令方式与它们交互。
2. 跨渲染保留值：它可以存储可变值，与状态不同，这些值在更新时不会触发重新渲染。

---

useRef 语法

const myRef = useRef(initialValue);

• myRef：由useRef创建的引用对象。
• initialValue：要存储在引用对象中的初始值。这可以是任何东西，例如 DOM 节点、对象或原始值。

useRef 返回的引用对象有一个 current 属性，它是实际值存储的位置。

---

useRef 的工作原理

1. 访问 DOM 元素： 您可以使用 useRef 直接访问功能组件中的 DOM 元素，就像类组件中的 ref 属性一样。

   const MyComponent = () => {
     const inputRef = useRef(null);

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

     return (
       <div>
         <input ref={inputRef} />
         <button onClick={focusInput}>Focus Input</button>
       </div>
     );
   };

• 这里，inputRef用于引用;元素，并且 focusInput 函数在单击按钮时聚焦于该输入元素。

1. 跨渲染存储可变值： 您可以使用 useRef 来存储在渲染过程中持续存在的值，但在更改时不会触发重新渲染。

   const TimerComponent = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

• 在此示例中，countRef 存储一个可变值。该值可以更新而不会导致重新渲染，这与 useState 不同，useState 会触发重新渲染。

---

useRef 的常见用例

1. 访问 DOM 元素：例如，聚焦输入字段、滚动到特定元素或测量元素的大小。

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref={topRef}>



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• 说明：prevCountRef 存储之前的 count 值，可以在不触发重新渲染的情况下访问该值。

1. 避免复杂值的重新渲染：如果你有一个不需要触发重新渲染的大型对象或复杂数据结构，useRef 可以存储它而不影响组件的表演。

2. 跟踪间隔或超时：您可以存储超时或间隔的 ID，以便稍后清除它们。
   

const myRef = useRef(initialValue);

• 说明：intervalRef 存储间隔的 ID，可用于在组件卸载时清除间隔。

---

useRef 和 useState 之间的主要区别

功能 useRef 使用状态 标题>

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

触发重新渲染 否（不触发重新渲染） 是（状态更改时触发重新渲染） 用例 存储可变值或 DOM 引用 存储影响渲染的状态 价值存储 存储在当前属性中 存储在状态变量中 跨渲染的持久性 是（在渲染之间保留值而不触发重新渲染） 是（但更新时触发重新渲染） 表>

---

示例：使用 useRef 进行表单验证

这是一个使用 useRef 进行表单验证的示例，重点关注无效时的输入字段。

从 'react' 导入 React, { useRef, useState };

const FormComponent = () =>; {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [错误，setError] = useState('');

  const validateInput = () =>; {
    如果（输入值===''）{
      setError('输入不能为空');
      inputRef.current.focus(); // 聚焦输入元素
    } 别的 {
      设置错误('');
    }
  };

  返回 （
    <div>
      ; setInputValue(e.target.value)}
      >>
      {错误&<p>



<ul>
<li>
<strong>说明</strong>： 

<ul>
<li>inputRef 用于在输入值为空时聚焦于输入元素。</li>
<li>使用 useState 无法实现此功能，因为关注 DOM 元素需要直接访问该元素，而 useState 无法提供这一点。</li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>使用总结Ref Hook</strong>
</h3>

<ul>
<li>
<strong>useRef</strong> 用于存储对 DOM 元素和可变值的引用，更新时不会触发重新渲染。</li>
<li>它对于直接访问 DOM 节点很有用（例如，用于聚焦、滚动或动画）。</li>
<li>
<strong>useRef</strong> 还可以方便地存储跨渲染持续存在的值，而无需触发重新渲染，例如跟踪先前的值或存储超时/间隔 ID。</li>
<li>
<strong>主要区别</strong>：与 useState 不同，更新 useRef 不会触发重新渲染。</li>
</ul>


<hr>

<h3>
  
  
  <strong>结论</strong>
</h3>

<p><strong>useRef</strong> 钩子对于处理 React 中的可变值和直接 DOM 操作非常有用。无论您是使用表单元素、跟踪先前的状态还是与第三方库交互，useRef 都提供了一个干净、高效的解决方案。通过使用 useRef，您可以保持持久性，而不会触发不必要的重新渲染，这使其成为性能敏感操作的绝佳选择。</p>


<hr>


          </div>

            
        

以上是掌握 React 的 useRef Hook：使用 DOM 和可变值的详细内容。更多信息请关注PHP中文网其他相关文章！