React 에서 refs 의 일반적인 용법 집합

Refs 가 뭐 예요?
Refs 는 DOM 노드 나 render 방법 에서 만 든 React 요 소 를 방문 할 수 있 는 방식 을 제공 합 니 다.
Ref 리 트 윗 은 ref 를 구성 요 소 를 통 해 하위 구성 요소 에 자동 으로 전달 하 는 기술 입 니 다.보통 DOM 노드 나 React 요소 의 인 스 턴 스 를 가 져 오 는 도구 입 니 다.React 에서 Refs 는 dom 노드 나 render 방법 에서 만 든 React 요 소 를 방문 할 수 있 는 방식 을 제공 합 니 다.
Refs 리 트 윗
Ref 리 트 윗 은 일부 구성 요소 가 ref 를 받 아들 이 고 하위 구성 요소 에 전달 할 수 있 도록 선택 할 수 있 는 기능 입 니 다.
기본적으로 함수 구성 요소 에 ref 속성 을 사용 할 수 없습니다.인 스 턴 스 가 없 기 때 문 입 니 다.
1.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>;
  }
}

2.리 턴 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>
    );
  }
}

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

3.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} />
      </div>
    );
  }
}
//   
class CreateRefComp extends React.PureComponent {
  render() {
    return <div>CreateRefComp</div>;
  }
}

4.useRef

훅 은 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>;
  }
}

5.Refs 와 함수 구성 요소

기본 적 인 상황 에서 함수 구성 요소 에 ref 속성 을 사용 할 수 없습니다.인 스 턴 스 가 없 기 때 문 입 니 다

함수 구성 요소 에 ref 를 사용 하려 면 forward Ref(useImperative Handle 과 결합 하여 사용 가능)

를 사용 할 수 있 습 니 다.

또는 이 구성 요 소 를 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);

forward Ref 와 useImperative Handle 의 최종 목적 은 ref 에 호출 가능 한 대상 을 제공 하 는 것 입 니 다!

Refs and the DOM

forwardRef

useimperativehandle

총결산
React 에서 refs 의 흔 한 용법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 에서 refs 용법 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!