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

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사용자 정의 소품 을 사용하는 것의 가치가 무엇이라고 생각 합니까?

답변