React.forwardRef를 사용하는 것과 커스텀 레퍼런스 프로포즈를 사용하는 것의 가치

React.forwardRef를 사용하는 것과 커스텀 레퍼런스 프로포즈를 사용하는 것의 가치

나도 그것을 알아.React.forwardRefrefact docs에서 자녀 기능 컴포넌트에 ref를 전달하는 허가된 방법인 것 같습니다.

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>;

제가 생각할 수 있는 유일한 장점은 refs를 위한 일관된 api가 있다는 것입니다만, 다른 장점은 없습니까?커스텀 프로펠을 전달하면 렌더링에 영향을 미쳐 추가 렌더링을 발생시키나요? ref가 변경 가능한 상태로 저장되어 있기 때문에current필드?

예를 들어 여러 참조(tbh는 코드 냄새를 나타낼 수 있지만 여전히)를 전달하고 싶다고 가정하면 customRef 소품만 사용할 수 있습니다.

제 질문은 이 제품을 사용하는 것의 가치는 무엇인가 하는 것입니다.forwardRef커스텀 소품에서요?

React 문서에서도 커스텀 레퍼런스 프로포즈를 보다 유연한 접근법으로 언급하고 있습니다.forwardRef:

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

Dan Abramov가 그 장점에 대해 쓴 요지도 있다.

• 모든 React 버전과 호환 가능
• 클래스 및 기능 컴포넌트에 대응
• 여러 레이어 깊이의 중첩된 구성요소로 참조 전달 간소화

덧붙여서, 평소와 같이 레퍼런스를 통과시키는 것은 변화를 일으키지 않으며, 여러 레퍼런스를 받는 방법입니다.유일한 장점은forwardRef생각나는 건

• DOM 노드, 기능 컴포넌트 및 클래스 컴포넌트를 위한 균일한 액세스 API(상기)
• ref예를 들어 TypeScript를 사용하여 유형을 제공하는 경우 속성이 소품 API를 부풀리지 않습니다.

커스텀 프로펠을 전달하면 렌더링에 영향을 미쳐 추가 렌더링이 발생합니까?

인라인 콜백 ref 함수를 프롭으로 전달하면 ref는 잠재적으로 re-render를 트리거할 수 있습니다.그러나 클래스 인스턴스 메서드 또는 다음과 같은 메모화를 통해 정의하는 것이 좋습니다.useCallback.

Ref에서는 표준 속성입니다.React구성 요소들.

추가 기능을 제공하기 위해 다른 컴포넌트를 랩하는 컴포넌트도 있습니다.ref포장된 컴포넌트를 참조하고 컴포넌트가 다음 컴포넌트가 포함되어 있을 것으로 예상한다.ref★★★★★★★★★★★★★★★★★★.

컴포넌트에는 다음 컴포넌트가 있는 것이 좋습니다.ref다른 컴포넌트 및 라이브러리와 호환되는 속성.

는 " 수 "ref" 속성을 사용해야 .forwardRef 제공하다ref★★★★★★★★★★★★★★★★★★.

언급URL : https://stackoverflow.com/questions/58578570/value-of-using-react-forwardref-vs-custom-ref-prop