在react中useRef和createRef有什么区别？

在使用React 编写自定义组件时我们会常用这么写 const mydom = useRef(null); 然而React本身也为我们提供了一个API 这样用const mydom = React.createRef();那么之间有什么区别呢？

它们的不同之处在于 createRef 将始终创建一个新的 ref。 所以在每次渲染时它的值都是新的，而 useRef 始终返回初始渲染相同的 ref。 下面找了一下例子，当我们点击按钮时会发现createRef()中对象已经改变了。

import React, { useRef, createRef, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);