React中refs的一些常見用法匯總

更新時間：2021年07月15日 11:12:22 作者：好_快

Refs是一個獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關(guān)于React中refs的一些常見用法,需要的朋友可以參考下

什么是Refs

Refs 提供了一種方式，允許我們訪問 DOM 節(jié)點或在 render 方法中創(chuàng)建的 React 元素。
Ref轉(zhuǎn)發(fā)是一項將ref自動通過組件傳遞到子組件的技巧。通常用來獲取DOM節(jié)點或者React元素實例的工具。在React中Refs提供了一種方式，允許用戶訪問dom節(jié)點或者在render方法中創(chuàng)建的React元素。

Refs轉(zhuǎn)發(fā)

Ref 轉(zhuǎn)發(fā)是一個可選特性，其允許某些組件接收 ref，并將其向下傳遞（換句話說，“轉(zhuǎn)發(fā)”它）給子組件。

默認(rèn)情況下，不能在函數(shù)組件上使用 ref 屬性，因為它們沒有實例：

一、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>;
  }
}

二、回調(diào) Refs

如果 ref 回調(diào)函數(shù)是以內(nèi)聯(lián)函數(shù)的方式定義的，在更新過程中它會被執(zhí)行兩次
第一次傳入?yún)?shù) null，然后第二次會傳入?yún)?shù) DOM 元素
這是因為在每次渲染時會創(chuàng)建一個新的函數(shù)實例，所以 React 清空舊的 ref 并且設(shè)置新的
通過將 ref 的回調(diào)函數(shù)定義成 class 的綁定函數(shù)的方式可以避免上述問題
但是大多數(shù)情況下它是無關(guān)緊要的

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);
  }
  //回調(diào)函數(shù)
  setCallbackRefDom = (ref) => {
    this.callbackRefDom = ref;
  };
  setCallbackRefComp = (ref) => {
    this.callbackRefComp = ref;
  };
  //回調(diào)函數(shù)
  render() {
    return (
      <div>
        <div ref={this.setCallbackRefDom}>callbackRefDom</div>
        <CallbackRefComp ref={this.setCallbackRefComp} />
      </div>
    );
  }
}

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

三、React.createRef()

React 16.3 版本引入
較早版本的 React，推薦使用回調(diào)形式的 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} />
      </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 與函數(shù)組件

默認(rèn)情況下，你不能在函數(shù)組件上使用 ref 屬性，因為它們沒有實例
如果要在函數(shù)組件中使用 ref，你可以使用 forwardRef（可與 useImperativeHandle 結(jié)合使用）
或者將該組件轉(zhuǎn)化為 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 最終目的是設(shè)法給 ref 提供一個可調(diào)用的對象！