使用回调分配 React ref 与直接设置它的区别

Question

它的工作原理和行为相同，但想知道直接设置 ref 与通过将元素作为参数的回调设置它是否有任何实际区别。

给定这个反应钩子组件：

const myComponent = ({ ...props}) => {
  const myRef = React.useRef(null);
  ...
  return (
    <div>
      ref={myRef}
    </div>
  )
}

对

const myComponent = ({ ...props}) => {
  const myRef = React.useRef(null);
  ...
  return (
    <div>
      ref={element => {
        myRef.current = element;        
      }}
    </div>
  )
}

Answer 1

根据useRef文档，两者都相似：

useRef 返回一个可变的 ref 对象，其 .current 属性初始化为传递的参数 (initialValue(。

因此，第一个代码示例的工作方式与第二个代码示例完全相同。

除了

如果你想在 React 将 ref

附加到或分离到 DOM 节点时运行一些代码，你可能想改用回调 ref。

含义;如果要重新渲染组件，则可以使用回调引用。

---

文档本身的最佳示例：

测量 DOM 节点的位置或大小

function MeasureExample() {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);
  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

因此，您可以找到元素的高度将使用回调引用来更改。如果不使用回调引用，则不会重新呈现它，也不会更新内容高度。

Answer 2

好吧，使用第一种方法，您无法在其内容更改时通知，更改 .current 属性不会重新渲染它，但是使用 callback ref，当 React 将 ref 附加到或分离到 DOM 节点时，您可以使用根据您的用例运行一些代码。

对于回调方法，您实际上不需要使用 useRef而是可以使用 useCallback 。 这是 React 文档中的一个例子：

function MeasureExample() {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node => {
  if (node !== null) {
     setHeight(node.getBoundingClientRect().height);
  }
  }, []);
    return (
   <>
     <h1 ref={measuredRef}>Hello, world</h1>
     <h2>The above header is {Math.round(height)}px tall</h2>
   </>
 );
}