사용의 효과 / 사용의 효과?


10

나는 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])

3
1. 마운트 및 모든 종속성 업데이트 (모든 상태 / 소품 변경)시 호출됩니다. 2. 빈 종속성 목록을 지정 했으므로 마운트시에만 호출되었습니다. 3. 나열된 종속성 중 마운트 및 변경시 호출
ajobi

2
Dan Abramov는 useEffect : overreacted.io/a-complete-guide-to-useeffect 에 대한 훌륭한 블로그 게시물을 작성했습니다 . ;-)
rphonika

답변:


18
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...]



1

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


0

두 번째 매개 변수에 전달 된 일부 인수가있는 useEffect useEffect (() => {}, [arg])

arg가 변경되면 먼저 실행되고 다시 실행됩니다.

useEffect 내부의 반품에 대해 물어 보는 것도 잊어 버리십시오 ... 구성 요소를 분리 할 때 실행되는 정리 용도

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.