리액트 훅의 '유출 감소' 보풀 규칙 이해

리액트 훅의 '유출 감소' 보풀 규칙 이해

나는 '배출물' 보풀 규칙을 이해하는데 어려움을 겪고 있다.

이 게시물과 이 게시물은 이미 읽었지만 답을 찾을 수 없었습니다.

다음은 보풀 문제가 있는 간단한 리액트 컴포넌트입니다.

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    useEffect(() => {
        onChange(value);
    }, [value]);

    return (
        <input 
           value={value} 
           type='text' 
           onChange={(event) => setValue(event.target.value)}>
        </input>
    )
} 

추가가 필요합니다.onChange에게useEffect의존관계 배열하지만 제가 알기로는onChange절대 변하지 않을 테니까 거기 있으면 안 돼요.

보통 이렇게 관리합니다.

const MyCustomComponent = ({onChange}) => {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
        onChange(event.target.value)
    }

    return (
        <input 
           value={value} 
           type='text'
           onChange={handleChange}>
        </input> ​
    )
} 

왜 보풀이 나지?첫 번째 예에서 보풀 규칙에 대한 명확한 설명이 있습니까?

아니면 제가 사용하지 말아야 하나요?useEffect여기? (나는 갈고리가 달린 올가미)

린터 규칙이 원하는 이유onChange에 들어가다useEffect훅이 가능하기 때문에onChange이 보풀 규칙은 이러한 종류의 "데이터 유출" 참조를 방지하기 위한 것입니다.

예를 들어 다음과 같습니다.

const MyParentComponent = () => {
    const onChange = (value) => { console.log(value); }

    return <MyCustomComponent onChange={onChange} />
}

모든 렌더링MyParentComponent다른 것을 통과하다onChange기능하다MyCustomComponent.

특정의 경우, 아마 신경 쓰지 않을 것입니다.전화만 걸면 됩니다.onChange값이 변경되었을 때가 아니라onChange기능이 변경됩니다.다만, 사용 방법을 보면, 그것은 명확하지 않습니다.useEffect.

---

여기서의 뿌리는 당신의useEffect다소 자연스럽지 않습니다.

useEffect부작용에 가장 적합합니다만, 여기서는 'Y가 바뀌면 X를 한다'와 같은 일종의 '구독' 개념으로 사용하고 있습니다.그것은 기능적으로도 기능합니다.그것은, 그 기계로 인해,deps어레이(이 경우는, 전화도 하고 있습니다만)onChange(아마도 원하지 않을 것이다) 하지만 의도한 용도는 아닙니다.

부르기onChange여기에서는 부작용이 아니라, 단지 자극하는 효과일 뿐이다onChange을 위한 행사.<input>그래서 두 번째 버전에서는 두 번째 버전 모두onChange그리고.setValue함께 하는 것이 더 관용적이다.

값을 설정하는 다른 방법(클리어 버튼 등)이 있는 경우, 항상 잊지 않고 전화해야 합니다.onChange지루할 수도 있기 때문에 이렇게 쓸 수도 있습니다.

const MyCustomComponent = ({onChange}) => {
    const [value, _setValue] = useState('');

    // Always call onChange when we set the new value
    const setValue = (newVal) => {
        onChange(newVal);
        _setValue(newVal);
    }

    return (
        <input value={value} type='text' onChange={e => setValue(e.target.value)}></input>
        <button onClick={() => setValue("")}>Clear</button>
    )
}

하지만 이 시점에서 이것은 소름끼친다.

의 주요 목적은exhaustive-depswarning은 개발자가 효과 내부의 종속성을 놓쳐 일부 동작을 잃는 것을 방지하기 위한 것입니다.

Facebook Core 개발자인 Dan Abramov는 이 규칙을 계속 사용할 것을 강력히 권장합니다.

함수를 종속성으로 전달하는 경우 React FAQ에 다음 장이 있습니다.

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

dr;dr

종속성 배열에 함수를 넣어야 하는 경우:

• 각 렌더링에서 참조가 변경되지 않도록 함수를 컴포넌트 외부에 배치합니다.
• 가능하면 자신의 능력 밖의 함수를 호출하고 결과를 종속성으로 사용합니다.
• 가 컴포넌트 되어야 하는 , 의 참조를 하려면 을 합니다.useCallback콜백 함수의 종속성이 변경된 경우에만 참조가 변경됩니다.

언급URL : https://stackoverflow.com/questions/58866796/understanding-the-react-hooks-exhaustive-deps-lint-rule