반응 후크 사용효과 종속성 배열

반응 후크 사용효과 종속성 배열

나는 리액션의 새로운 후크 API에 대해 머리를 싸매고 있다.구체적으로는 다음과 같은 고전적인 사용 사례를 구축하려고 합니다.

componentDidUpdate(prevProps) {
    if (prevProps.foo !== this.props.foo) {
        // animate dom elements here...
        this.animateSomething(this.ref, this.props.onAnimationComplete);
    }
}

기능 컴포넌트로 같은 것을 구축하려고 했습니다.useEffect하지만 어떻게 하는지 알 수가 없어요.내가 시도한 건 다음과 같다.

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo]);

이렇게 하면 소품만 효과라고 합니다.foo 변화.그리고 그것은 효과가 있습니다 – 하지만! 이것은 반패턴으로 보입니다.eslint-plugin-react-hooks에러로서 마크 합니다.효과 내에서 사용되는 모든 종속성은 종속성 배열에서 선언해야 합니다.즉, 다음과 같은 작업을 수행해야 합니다.

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo, ref, props.onAnimationComplete]);

보풀 에러는 발생하지 않습니다만, 이 에러를 호출하는 목적은 완전히 어긋납니다.props.foo변화들.나는 다른 소품이나 심판들이 바뀔 때 그것이 불려지는 것을 원하지 않는다.

이제, 내가 읽은 바로는,useCallback이걸 포장하기 위해서.시도해 봤지만 더 이상 나아가지 않았다.

누가 좀 도와줄래요?

저는 이것을 다음과 같이 쓸 것을 권장합니다.

const previousFooRef = useRef(props.foo);

useEffect(() => {
    if (previousFooRef.current !== props.foo) {
       animateSomething(ref, props.onAnimationComplete);
       previousFooRef.current = props.foo;
    }
}, [props.foo, props.onAnimationComplete]);

이펙트 안에 조건이 있으면 복잡함을 피할 수 없습니다.이 조건이 없으면 애니메이션이 언제 실행되느냐가 아니라 마운트 상에서 실행되기 때문입니다.props.foo변화들.이 조건에 의해, 유저 이외의 유저에 대해서, 애니메이션이 발생하는 것을 회피할 수도 있습니다.props.foo바꾸다.

포함시킴으로써props.onAnimationComplete의존관계 어레이에서는 의존관계 누락과 관련된 향후 버그가 발생하지 않도록 보풀 규칙을 비활성화하지 않도록 합니다.

다음으로 작업 예를 제시하겠습니다.

린터는 당신에게 나쁜 조언을 주므로 억제하세요.React에서는 두 번째 인수로 변경 시 영향을 트리거해야 하는 값(및 변경 시만)을 전달해야 합니다.

useEffect(() => {
    animateSomething(ref, props.onAnimationComplete);
}, [props.foo]); // eslint-disable-line react-hooks/exhaustive-deps

그것은 라이언의 해결책과 같은 결과로 이어집니다.

이 규칙을 위반하는 것은 문제가 없다고 생각합니다.와는 대조적으로useCallback그리고.useMemo일반적인 경우 오류로 이어지지 않습니다.두 번째 인수의 내용은 높은 수준의 논리이다.

관련이 없는 값이 변경되면 효과를 호출할 수도 있습니다.

useEffect(() => {
    alert(`Hi ${props.name}, your score is changed`);
}, [props.score]);

콜백에서 신규(오래되지 않음)이어야 하지만 효과를 재지정해서는 안 되는 값을 refs로 이동합니다.

const elementRef = useRef(); // Ex `ref` from the question
const animationCompleteRef = useRef();

animationCompleteRef.current = props.onAnimationComplete;

useEffect(() => {
    animateSomething(elementRef, animationCompleteRef.current);
}, [props.foo, elementRef, animationCompleteRef]);

효과가 있는 이유는useRef반환 값은 렌더링에서 변경되지 않습니다.

언급URL : https://stackoverflow.com/questions/55228102/react-hook-useeffect-dependency-array