[javascript] React.forwardRef와 사용자 정의 참조 소품 사용의 가치

Program / 글쓴이

React.forwardRef는 반응 문서에서 하위 기능 구성 요소에 참조를 전달하는 승인 된 방법 인 것으로 보입니다.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

그러나 단순히 맞춤형 소품을 전달하는 것보다 이점이 무엇입니까? :

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

내가 생각할 수있는 유일한 장점은 심판에 대한 일관된 API를 보유하고 있다는 것입니다. 그러나 다른 이점이 있습니까? 커스텀 소품을 전달하면 렌더링에있어 디핑에 영향을 미치고 추가 렌더링을 유발할 수 current있습니까?

예를 들어 여러 참조를 전달하고 싶다고 말하면 (tbh, 코드 냄새를 나타낼 수 있지만 여전히) customRef 소품을 사용하는 것이 유일한 해결책입니다.

내 질문은 forwardRef사용자 정의 소품 을 사용하는 것의 가치가 무엇이라고 생각 합니까?

답변

React 문서 조차도 사용자 정의 Ref 소품을보다 유연한 접근 방식으로 언급합니다 forwardRef.

React 16.2 이하를 사용하거나 참조 전달 에서 제공하는 것보다 더 많은 유연성이 필요한 경우 ,이 대체 방법을 사용 하고 다른 이름의 prop 으로 명시 적으로 전달할 수 있습니다 .

Dan Abramov가 장점에 대해 쓴 요점 도 있습니다 .

  • 모든 React 버전과 호환
  • 클래스 및 함수 구성 요소에 사용
  • 여러 레이어 깊이의 중첩 된 컴포넌트에 참조를 전달하는 것을 단순화합니다.

필자는 일반적인 소품으로 심판을 전달해도 변경 사항이 변경 되지 않으며 여러 심판을 처리하는 방법입니다. forwardRef내 마음 에 오는 유일한 장점은 다음과 같습니다.

  • DOM 노드, 기능 및 클래스 구성 요소를위한 균일 한 액세스 API
  • ref 속성은 props API를 부 풀리지 않습니다. 예를 들어 TypeScript로 유형을 제공하는 경우

사용자 정의 소품을 전달하면 렌더링과 관련하여 디핑에 영향을 미치고 추가 렌더링이 발생합니까?

인라인 콜백 참조 함수를 prop로 전달하면 참조가 잠재적으로 다시 렌더링을 트리거 할 수 있습니다 . 그러나 어쨌든 클래스 인스턴스 메소드로 또는 같은 메모를 통해 정의 하는 것이 좋습니다useCallback .

답변

RefReact구성 요소 의 표준 특성입니다 .

추가 기능을 제공하기 위해 다른 구성 요소를 랩핑하는 일부 구성 요소는 랩핑 ref된 구성 요소를 참조하고 구성 요소에 ref특성 이있을 것으로 예상합니다 .

컴포넌트 ref가 다른 컴포넌트 및 라이브러리와 호환되는 특성을 갖는 것이 좋습니다 .

함수 구성 요소는 “ref”특성을 가질 수 없으며 forwardRef대신 ref특성 을 제공하기 위해 사용해야 합니다.

답변