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

2021-06-01  乐帮网

react

在使用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);

 

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:xinsiyu6@gmail.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力