目錄

• 什麼是Refs
  
• 一、String 型別的 Refs
  
• 二、回撥 Refs
• 三、React.createRef()
• 四、useRef
• 五、Refs 與函式元件
• 總結

什麼是Refs

Refs 提供了一種方式，允許我們訪問 DOM 節點或在 render 方法中建立的 React 元素。
Ref轉發是一項將ref自動通過元件傳遞到子元件的技巧。 通常用來獲取DOM節點或者React元素例項的工具。在React中Refs提供了一種方式，允許使用者訪問dom節點或者在render方法中建立的React元素。

Refs轉發

Ref 轉發是一個可選特性，其允許某些元件接收 ref，並將其向下傳遞（換句話說，“轉發”它）給子元件。

預設情況下，不能在函式元件上使用 ref 屬性，因為FYKyWRK它們沒有例項：

一、String 型別的 Refs

不建議使用，因為 string 型別的 refs 存在一些問題。它已過時並可能會在未來的版本被移除。

import React from "react";
// 父元件
export default class StringRef extends React.PureComponent {
  componentDidMount() {
    console.log("stringRefDom:",this.refs.stringRefDom);
    console.log("stringRefComp:",this.refs.stringRefComp);
  }
  render() {
    return (
      <div>
        {/*原生元件使用方式*/}
        <div ref={"stringRefDom"}>stringRefDom</div>
        {/*類元件使用方式*/}
        <StringRefComp ref={"stringRefComp"} />
      </div>
    );
  }
}
//類元件
class StringRefComp extends React.PureComponent {
  render() {
    return <div>StringRefComp</div>;
  }
}

二、回撥 Refs

• 如果 ref 回撥函式是以行內函數的方式定義的，在更新過程中它會被執行兩次
• 第一次傳入引數 null，然後第二次會傳入引數 DOM 元素
• 這是因為在每次渲染時會建立一個新的函式例項，所以 React 清空舊的 ref 並且設定新的
• 通過將 ref 的回撥函式定義成 class 的繫結函式的方式可以避免上述問題
• 但是大多數情況下它是無關緊要的

import React from "react";
// 父元件
export default class CallbackRef extends React.PureComponent {
  constructor(props) {
    super(props);
    this.callbackRefDom = null;
    this.callbackRefComp = null;
  }
  componentDidMount() {
    console.log("callbackRefDom:",this.callbackRefDom);
    console.log("callbackRefComp:",this.callbackRefComp);
  }
  //回撥函式
  setCallbackRefDom = (ref) => {
    this.callbackRefDom = ref;
  };
  setCallbackRefComp = (ref) => {
    this.callbackRefComp = ref;
  };
  //回撥函式
  render() {
    return (
      <div>
        <div ref={this.setCallbackRefDom}>callbackRefDom</div>
        <CallbackRefComp ref={this.setCallbackRefComp} />
      </div&ghttp://www.cppcns.com
 
t;
    );
  }
}

//類元件
class CallbackRefComp extends React.PureComponent {
  render() {
    return <div>callbackRefComp</div>;
  }
}

三、React.createRef()

• React 16.3 版本引入
• 較早版本的 React，推薦使用回撥形式的 refs

import React from "react";
// 父元件
export default class CreateRef extends React.PureComponent {
  constructor(props) {
    super(props);
    this.createRefDom = React.createRef();
    this.createRefComp = React.createRef();
  }
  componentDidMount() {
    console.log("createRefDom:",this.createRefDom.current);
    console.log("createRefComp:",this.createRefComp.current);
  }
  render() {
    return (
      <div>
        <div ref={this.createRefDom}>createRefDom</div>
        <CreateRefComp ref={this.createRefComp} />
      www.cppcns.com</div>
    );
  }
}
//類元件
class CreateRefComp extends React.PureComponent {
  render() {
    return <div>CreateRefComp</div>;
  }
}

四、useRef

• Hook 是 React 16.8 的新增特性

import React,{ useEffect } from "react";
// 父元件
const UseRef = React.memo(() => {
  // // 同樣可以用
  // const createRefDom = React.createRef();
  // const createRefComp = React.createRef();
  const createRefDom = React.useRef();
  const createRefComp = React.useRef();
  useEffect(() => {
    console.log("useRefDom:",createRefDom.current);
    console.log("useRefComp:",createRefComp.current);
  },[]);
  return (
    <div>
      <div ref={createRefDom}>useRefDom</div>
      <UseRefComp ref={createRefComp} />
    </div>
  );
});

export default UseRef;

//類元件
class UseRefComp extends React.PureComponent {
  render() {
    return <div>useRefComp</div>;
  }
}

五、Refs 與函式元件

• 預設情況下，你不能在函式元件上使用 ref 屬性，因為它們沒有例項
• 如果要在函式元件中使用 ref，你可以使用 forwardRef（可與 useImperativeHandle 結合使用）
• 或者將該元件轉化為 class 元件。

import React,{ useEffect,useImperativeHandle } from "react";

// 父元件
const ForwardRef = React.memo(() => {
  const createRefComp = React.useRef();
  const createRefCompMethod = React.useRef();

  useEffect(() => {
    console.log("useRefComp:",createRefComp.current);
    console.log("createRefCompMethod:",createRefCompMethod.current);
    createRefComp.current.reload();
  },[]);
  return (
    <div>
      <ForwardRefFunc ref={createRefComp} />
    </div>
  );
});

export default ForwardRef;

const RefFunc = React.forwardRef((props,ref) => {
  const [name,setName] = React.useState(null);
  const reload = () => {
    console.log("reload");
    setTimeout(() => {
      setName("ForwardRefFunc");
    },3000);
  };
  //useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父元件的例項值
  useImperativeHandle(ref,() => {
    return {
      reload: reload,};
  });
  return <div ref={ref}>ForwardRefFunc {name}</div>;
});
const ForwardRefFunc = React.memo(RefFunc);

forwardRef 和 useImperativeHandle 最終目的是設法給 ref 提供一個可呼叫的物件！

• Refs and the DOM
FYKyWRK
• forwardRef
• useimperativehandle

總結

到此這篇關於React中refs的一些常見用法的文章就介紹到這了,更多相關React中refs用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！