나는 useEffect
후크를 깊이 이해하려고합니다 .
언제 어떤 방법을 사용해야하며 왜 그런지 알고 싶습니다.
1.useEffect with no second paraments
useEffect(()=>{})
2.useEffect with second paraments as []
useEffect(()=>{},[])
3.useEffect with some arguments passed in the second parameter
useEffect(()=>{},[arg])
답변
useEffect(callback)
모든 컴포넌트 렌더 에서 실행 됩니다 .
일반적으로 모든 렌더링에서 함수의 본문 실행과 유사한 디버깅에 사용됩니다.
const Component = () => {
callback()
return <></>;
};
useEffect(callback,[])
구성 요소 마운트에서 한 번 실행 됩니다.
일반적으로 데이터 가져 오기 등으로 구성 요소 상태를 초기화하는 데 사용됩니다.
참고 : 콜백 은 렌더 단계 (알려진 “Gotcha”) 후에 실행 됩니다.
useEffect(callback,[arg])
런 변화 의 arg
값입니다.
“에 변경” 을 참조 얕은 비교 의 이전 값 arg
(값 비교 arg
이전 렌더링에서 현재를, prevArg === arg ? Do nothing : callback()
).
일반적으로 props / state change에서 이벤트를 실행하는 데 사용됩니다.
참고 : 여러 종속성이 제공 될 수 있습니다.
[arg1,arg2,arg3...]
useEffect
Dan Abramov 의 완벽한 가이드useEffect
API .- 효과 후크 사용 -문서를 반응시킵니다.
답변
React 클래스 라이프 사이클 메소드에 익숙하다면 useEffect Hook를 componentDidMount, componentDidUpdate 및 componentWillUnmount 결합으로 생각할 수 있습니다.
1. use second second parament없이 효과 : 이것은 컴포넌트가 방금 마운트되었거나 업데이트되었을 때 어떤 일이 일어나길 원할 때 사용됩니다. 개념적으로 모든 렌더링 후에 발생하기를 원합니다.
2.use as second paraments with [] : 이것은 마운트 할 때 한 번만 실행되는 경우 컴포넌트를 마운트 할 때 무언가를 원할 때 사용됩니다. 친숙한 componentDidMount 및 componentWillUnmount에 더 가깝습니다.
두 번째 매개 변수에 전달 된 일부 인수의 효과 : 이것은 pramter가 통과했을 때 무언가가 일어나기를 원할 때 사용됩니다. 귀하의 경우에 인수가 변경되었습니다.
더 많은 정보를 위해서. 여기를 확인하십시오 : https://reactjs.org/docs/hooks-effect.html
답변
두 번째 매개 변수에 전달 된 일부 인수가있는 useEffect useEffect (() => {}, [arg])
arg가 변경되면 먼저 실행되고 다시 실행됩니다.
useEffect 내부의 반품에 대해 물어 보는 것도 잊어 버리십시오 … 구성 요소를 분리 할 때 실행되는 정리 용도