useEffect의 예상 수익은 무엇에 사용됩니까?
후크에 대한 React 문서에는 다음과 같이 기술되어 있습니다.
"효과 내부에 로컬 변수가 있는 순서가 잘못된 응답을 처리할 수도 있습니다."
useEffect(() => {
let ignore = false;
async function fetchProduct() {
const response = await fetch('http://myapi/product/' + productId);
const json = await response.json();
if (!ignore) setProduct(json);
}
fetchProduct();
return () => { ignore = true };
}, [productId]);
다음 사항을 설명하여 이 문제를 더 잘 이해할 수 있도록 도와 주십시오.
- 환이 함함 ?? ??? ????
return () => { ignore = true }; - 이 예에서 무시되는 이유는 무엇입니까?
감사합니다!
환이 함함 ?? ??? ???? return () => { ignore = true };
왜 우리의 효과에서 함수를 반환했을까요?이것은 효과의 선택적 청소 메커니즘입니다.모든 효과는 그 후 정리되는 기능을 반환할 수 있습니다.따라서 구독 추가 및 제거 논리를 서로 가깝게 유지할 수 있습니다.그들은 같은 효과의 일부입니다!
그리고.
React는 정확히 언제 효과를 정리합니까?구성 요소가 마운트 해제되면 React가 정리를 수행합니다.그러나 앞에서 학습한 바와 같이 효과는 한 번뿐 아니라 모든 렌더링에 대해 실행됩니다.따라서 React는 다음 번에 효과를 실행하기 전에 이전 렌더링의 효과도 정리합니다.이를 통해 버그를 회피하는 이유와 나중에 성능 문제가 발생할 경우 이 동작에서 벗어나는 방법에 대해 설명합니다.
이 예에서 무시되는 이유는 무엇입니까?
에 ★★★★★★useEffect ★★ignore되어 있습니다.let ignore = false;★★★★★★★★★★★★★★★★★.fetchProduct는 이 함수에 를 실행합니다.ignoretrue 설정하게 됩니다.setProduct(json)은 '우리'가 있다는 state라고 하는product을 설정해 주세요.state를 사용합니다.setProduct(json) 이거.productin state에 대한 내용을 위해 됩니다.
주의: As[productId] useEffect,fetchProduct는 음음음음음음음 function 、 、 function 、 function 、 function 、 function 。productId★★★★★★★★★★★★★★★★★★.
효과를 건너뛰어 성능 최적화를 참조하십시오.
위의 설명을 이해하는 데 시간이 걸렸기 때문에, 여기서 설명하도록 하겠습니다.
대한 : ★★★★★★★★★★★★★★★★★★★★★★★★★★★★:
1- 반환이 함수인 이유는 무엇입니까? return () => { ignore = true };
useEffect는 청소기능에 사용하는 리턴기능을 사용할 수 있습니다.OK! 청소는 언제 필요합니까?예를 들어 구독을 취소하려면 useEffect 내의 "return function"에 등록 취소 로직을 추가해야 합니다.이 로직은 다른 장소에 배치하지 않고 레이스 상태가 될 수 있습니다.
이되는 것은 무엇입니까? 2- 이 예에서는 무시됩니다.ignore됩니다. 는 됩니까?일 때★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
[레이스 조건의 예 - 이미 레이스 조건을 알고 있는 이 부분은 무시해도 좋습니다]예를 들어 제품 목록을 클릭하면 이 제품 정보로 페이지가 갱신됩니다.여러 번 제품을 빠르게 클릭하면 use Effect는 언제든지 갱신됩니다.product_id변경 후 product1 [ will call api for product1 ]를 클릭하여 product2 [product2의 api를 호출하여 setProduct(product2data)를 취득합니다.이때 product1의 정지 데이터가 도착하여 setProduct(product1data)가 발생합니다.이렇게 하면 product2가 클릭되지만 product1 데이터가 페이지에 표시됩니다.
무슨 이야?ignore
인 설명★★★★★★★★★★★★★★★★★」
ignoresetProduct에 대해 오래된 데이터를 무시하고 설정하지 않도록 합니다.이렇게 하면 오래된 데이터가 나중에 도착하더라도 마지막으로 클릭한 제품만 설정됩니다.
[아쉬워]
- 첫 : , 첫1시 - : Product1 클릭 ->ignore false,api, data,false), call api, data, if(f)!ignore -> data, set ) -> product1 을 설정합니다.ignoretrue to true, true, true, true, true!
시나리오 조건,됨 ->false, api, [아직 하지 않음 call , arrival, (2-controll >> false, ign false, call api, call > > > > ignore false, call api, call > > ign false, call > > > > > > ign!ignore -를 설정하고 true로 합니다.-> product1 함수 데이터는 -> -> product2 ignore true, product1 > product1 ignore true, product1 > if ( ) !ignore) ->는 false OOPS이며 product1 데이터는 "old data"로 설정되지 않습니다.
이렇게 하면 항상 새로운 데이터가 생성됩니다.CHEERRRRRS : D
//all imports
function mufunc(){
useEffect(()=>{
const a = addEventListner('mouse' , console.log('mouse moves') ) //it prints when
//mouse moves
return ()=>{
removeEventListner(a) //whenever the component removes it will executes
}
} ,[])
}
요.ignore컴포넌트의 상태(마운트/언마운트)를 데이터 취득 로직에 통지합니다.컴포넌트가 마운트 해제된 경우 플래그를 true로 설정해야 합니다.그러면 데이터 취득이 비동기적으로 해결된 후 컴포넌트 상태를 설정할 수 없게 됩니다.컴포넌트가 마운트 해제되면 "return"(useEffect의 두 번째 부분)이 호출됩니다.단, 이 경우 쿼리가 변경되면 의존관계[쿼리]로 인해 컴포넌트가 재렌더되므로 sideEffect가 재초기화됩니다.IDE에서 이 코드를 실행한 후 브라우저에서 Chrome처럼 Devtools를 열고 콘솔의 내용을 지운 다음, 입력에 반응하는 단어를 입력하고 가능한 한 빨리 char 2를 추가한 후 char 2를 제거합니다. 콘솔에서 무슨 일이 발생했는지 확인합니다.
반환 함수는 정리 함수입니다.또는 사용자가 페이지를 떠나 컴포넌트가 마운트 해제되는 경우입니다.어레이는 마지막 부분으로 구성 요소의 라이프사이클 전체에 걸쳐 업데이트되는 상태를 저장할 수 있습니다.
것은, 을 참조해 주세요.
useEffect every render를 한 번 실행하지 않고 이전 렌더에서 효과를 정리한 후 정리 로직을 사용하여 함수를 반환하는 후속 효과를 실행하려면 다음과 같이 하십시오.
두 번째 질문 - 이 예에서 무시되는 이유는 무엇입니까? 다음과 같습니다.
주로 여러 요청이 동시에 처리될 때 productId의 최신 값이 상태 업데이트에 의존하는지 확인하기 위해 사용됩니다.이 경우 ignore 값은 URL에 productId의 최신 업데이트 값이 포함되어 있는 요청을 제외하고 처리 중인 모든 요청이 응답을 보낸 후에 True가 됩니다.(이 경우 ignore는 false로 남습니다)
이제 위의 코드에 대해 설명하겠습니다.
useEffect는 다음 효과가 실행되기 전에 반환으로 선언된 함수를 실행합니다.productId 값의 두 가지 변화가 매우 빠르게 발생했다고 가정해 보겠습니다(변경할 때마다 값을 업데이트하는 빠른 입력 입력이 원인일 수도 있습니다).첫 번째 업데이트의 경우 효과가 실행되고 ignore가 false로 설정됩니다.가져오기 요청이 정상적으로 처리되고 응답에 값이 할당되기 전에 productId에 대한 두 번째 변경이 발생한다고 가정합니다.여기서 이전 효과에 의해 반환된 함수가 실행되어 true가 무시되도록 할당됩니다.그 직후 productId의 새로운 값에 관련된 새로운 효과도 ignore에 false를 할당하여 새로운 productId를 사용하여 fetch 요청을 진행합니다.단, 이전 효과에 대한 ignore* 값은 true입니다.이는 응답을 받은 후 상태 업데이트가 무시됨을 의미합니다(! ignore = false).새로운 효과를 위해 productId 값이 변경되기 전에 성공적인 응답이 데이터와 함께 도착하고 코드 실행이 if 문으로 진행되면 ignore는 false(! ignore = true)로 유지되며 최신 productId 값을 사용하여 상태가 업데이트됩니다.
컴포넌트가 마운트 해제되면 반환(useEffect의 두 번째 부분)이 호출됩니다.단, 이 경우 쿼리가 변경되면 의존관계[쿼리]로 인해 컴포넌트가 재렌더되므로 sideEffect가 재초기화됩니다.IDE에서 이 코드를 실행한 후 브라우저에서 크롬처럼 Devtools를 열고 콘솔을 클리어한 다음 어떤 단어를 입력했는지 확인합니다.react 글자를 .문자 추가2한 한 차자를 하고 즉시 차자를 합니다.2 이 일어났는지 합니다. 콘솔을 체크하여 무슨 일이 일어났는지 확인합니다.
언급URL : https://stackoverflow.com/questions/56800694/what-is-the-expected-return-of-useeffect-used-for