React的hooks---useRef

湖边看客2023-07-27 12:23

useRef 用于返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）

useRef 创建的 ref 对象就是一个普通的 JavaScript 对象，而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象

复制代码

const refContainer = useRef(initialValue);

绑定 DOM 元素：

使用 useRef 创建的 ref 对象可以作为访问 DOM 的方式，将 ref 对象以 <div ref={myRef} /> 形式传入组件，React 会在组件创建完成后会将 ref 对象的 .current 属性设置为相应的 DOM 节点

复制代码

import React, { useRef } from 'react'

export default function FocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

绑定可变值：

useRef 创建的 ref 对象同时可以用于绑定任何可变值，通过手动给该对象的.current 属性设置对应的值即可

复制代码

import React, { useState, useRef, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const currentCount = useRef();
  // 使用 useEffect 获取当前 count
  useEffect(() => {
    currentCount.current = count;
  }, [count]);

  const alertCount = () => {
    setTimeout(() => {
      alert(`Current count is: ${currentCount.current}, Real count is: ${count}`);
    }, 3000);
  }

  return (
    <>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Count add</button>
      <button onClick={alertCount}>Alert current Count</button>
    </>
  );
}