React useEffect를 사용하여 로드 함수를 한 번만 호출하는 방법
useEffect React 후크는 변경 시마다 전달된 함수를 실행합니다.이것은, 목적의 속성이 변경되었을 때만 호출하도록 최적화 할 수 있습니다.
에서 합니까?componentDidMount변경사항이 있으면 다시 연락하지 않겠습니까?엔티티를 로드하려고 하는데 로드 함수에 구성요소의 데이터가 필요하지 않다고 가정합니다.요?useEffect훅 훅? 훅?
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
후크를 사용하면 다음과 같이 됩니다.
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
useEffect첫 번째 렌더 뒤에 빈 배열을 두 번째 인수로 지정할 수 있습니다.
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return <div> {/* ... */} </div>;
}
TL;DR
useEffect(yourCallback, [])첫 렌더링 콜백은 첫 번째 렌더링 후에 트리거됩니다.
상세설명
useEffect는 기본적으로 컴포넌트의 모든 렌더링 후에 실행됩니다(영향을 일으키는 원인이 됩니다).
「」를할 때useEffect반응하다React는 렌더링 후 및 DOM 업데이트를 수행한 후에 이 효과를 실행합니다.
콜백만 전달하면 각 렌더링 후에 콜백이 실행됩니다.
예를 , 「Resact」(리액트)는 「Respect」(리액트)를 실시합니다.」(리액트)는 「」(리액트)로 합니다).useEffect(() => console.log('hello'), [someVar, someOtherVar])은 첫 후 및 됩니다. - 콜백은 렌더링하다.someVar ★★★★★★★★★★★★★★★★★」someOtherVar변경되어 있습니다.
두 번째 인수를 빈 배열로 전달하면 React는 각 배열을 렌더링한 후 비교하고 변경된 내용을 인식하지 않으므로 첫 번째 렌더링 후에만 콜백을 호출합니다.
useMountEffect 후크
컴포넌트가 마운트된 후 함수를 한 번만 실행하는 것은 일반적인 패턴이기 때문에 구현 세부사항을 숨기는 자체 후크가 정당화될 수 있습니다.
const useMountEffect = (fun) => useEffect(fun, [])
모든 기능 컴포넌트에서 사용합니다.
function MyComponent() {
useMountEffect(function) // function will run only once after it has mounted.
return <div>...</div>;
}
useMountEffect 후크 정보
「」를 사용하고 useEffect두 번째 array 인수를 지정하면 React는 마운트 후(초기 렌더링) 및 배열 값이 변경된 후에 콜백을 실행합니다.빈 어레이를 통과시키므로 마운트 후에만 실행됩니다.
라이프 사이클-cycle-methods, 즉 컴포넌트-라이프-사이클-메서드)에 대한 .componentDidMount효과적 사고를 시작해야 합니다.반응 효과는 구식 클래스 라이프 사이클 방식과는 다릅니다.
기본적으로 모든 렌더링 사이클 후에 효과가 실행되지만 이 동작에서 제외하는 옵션이 있습니다.제외하려면 종속성 중 하나를 변경할 때만 효과가 수행됨을 의미하는 종속성을 정의할 수 있습니다.
효과에 종속성이 없다고 명시적으로 정의하면 효과는 첫 번째 렌더링 주기 이후에 한 번만 실행됩니다.
첫 번째 솔루션(ESLint 불만 있음)
따라서 이 예제의 첫 번째 솔루션은 다음과 같습니다.
function MyComponent() {
const loadDataOnlyOnce = () => {
console.log("loadDataOnlyOnce");
};
useEffect(() => {
loadDataOnlyOnce(); // this will fire only on first render
}, []);
return (...);
}
그러나 React Hooks ESLint 플러그인은 다음과 같은 불만을 제기합니다.
React Hook useEffect has missing dependency: loadDataOnlyOnce. Either include it or remove the dependency array.
처음에는 이 경고가 거슬리지만 무시하지 마세요.코드 작성에 도움이 됩니다.
두 번째 솔루션(컴포넌트에 의존하지 않는 경우 올바른 방법)
을 loadDataOnlyOnce배열에 는 모든됩니다. 는 "Dependency Array"이기 때문입니다. 왜냐하면 참조는loadDataOnlyOnce모든 렌더링에 변경이 가해지는 이유는 함수가 파괴되고(거치대칭), 새로운 함수가 생성되기 때문입니다만, 이것이 바로 우리가 원하지 않는 것입니다.
합니다.loadDataOnlyOnce렌더링 사이클 동안.
위의 함수 정의를 이동하기만 하면 됩니다.
const loadDataOnlyOnce = () => {
console.log("loadDataOnlyOnce");
};
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire only on first render
}, []);
return (...);
}
세 번째 솔루션(컴포넌트에 의존할 경우 올바른 방법)
( 「」 「」 「」)의 경우.loadDataOnlyOnce한 소품 상태에 따라 React에는 useCallback - 후크 - 후크
의 의미useCallback- 은 렌더링 동안 후 - 、 - - 、 - - - - - 。
function MyComponent() {
const [state, setState] = useState("state");
const loadDataOnlyOnce = useCallback(() => {
console.log(`I need ${state}!!`);
}, [state]);
useEffect(() => {
loadDataOnlyOnce(); // // this will fire only when loadDataOnlyOnce-reference changes
}, [loadDataOnlyOnce]);
return (...);
}
인수로 빈 합니다.useEffect이렇게 하면 문서를 인용하여 React에 효과적으로 알립니다.
이것은 React에게 당신의 효과는 소품이나 상태의 어떤 가치에도 의존하지 않기 때문에 재실행할 필요가 없다는 것을 알려준다.
다음은 동작을 보여주기 위해 실행할 수 있는 스니펫입니다.
function App() {
const [user, setUser] = React.useState(null);
React.useEffect(() => {
fetch('https://randomuser.me/api/')
.then(results => results.json())
.then(data => {
setUser(data.results[0]);
});
}, []); // Pass empty array to only run once on mount.
return <div>
{user ? user.name.first : 'Loading...'}
</div>;
}
ReactDOM.render(<App/>, document.getElementById('app'));<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>function useOnceCall(cb, condition = true) {
const isCalledRef = React.useRef(false);
React.useEffect(() => {
if (condition && !isCalledRef.current) {
isCalledRef.current = true;
cb();
}
}, [cb, condition]);
}
사용하세요.
useOnceCall(() => {
console.log('called');
})
또는
useOnceCall(()=>{
console.log('Fetched Data');
}, isFetched);
는 정하 a a a를 정의하는 .mount 기능은 방법으로 를 속입니다.useMount더 설명이 잘 되는 것 같아요
const mount = () => {
console.log('mounted')
// ...
const unmount = () => {
console.log('unmounted')
// ...
}
return unmount
}
useEffect(mount, [])
의존관계 배열을 공백으로 둡니다.이것이 더 잘 이해하는데 도움이 되기를 바랍니다.
useEffect(() => {
doSomething()
}, [])
빈 종속성 어레이가 마운트에서 한 번만 실행됨
useEffect(() => {
doSomething(value)
}, [value])
value종속성이 마지막 시간 이후 변경된 경우 효과가 다시 실행됩니다.
useEffect(() => {
doSomething(value)
})
의존성이 없습니다.렌더링할 때마다 호출됩니다.
여기 야신의 답변이 있습니다.
import {useEffect, useRef} from 'react';
const useOnceEffect = (effect: () => void) => {
const initialRef = useRef(true);
useEffect(() => {
if (!initialRef.current) {
return;
}
initialRef.current = false;
effect();
}, [effect]);
};
export default useOnceEffect;
사용방법:
useOnceEffect(
useCallback(() => {
nonHookFunc(deps1, deps2);
}, [deps1, deps2])
);
이는 질문에 정확하게 답변하는 것은 아니지만 첫 번째 렌더링 후에 함수를 한 번만 실행하는 것과 동일한 영향을 미칠 수 있습니다.componentDidMount 함수와 매우 유사합니다.의존성 보풀 오류를 피하기 위해 useEffect 대신 useState를 사용합니다.스테이트를 사용하는 첫 번째 인수로 자기실행 익명함수를 전달하기만 하면 됩니다.덧붙여서, 리액트가 단순히 이 기능을 하는 후크를 제공하지 않는 이유는 잘 모르겠습니다.
import React, { useState } from "react"
const Component = () => {
useState((() => {
console.log('componentDidMountHook...')
}))
return (
<div className='component'>Component</div>
)
}
export default Component
into into into into into into into into into into into into into into make make로 포장되어 있지 합니다.<React.StrictMode />하시는 useEffect[] 관계
리액트 18에 문제가 있었어이렇게 처리했습니다.
import { useEffect, useRef } from "react";
export default function Component() {
const isRunned = useRef(false);
useEffect(() => {
!isRunned.current &&
{
/* CODE THAT SHOULD RUN ONCE */
};
return () => {
isRunned.current = true;
};
}, []);
return <div> content </div>;
}
여기서 useEffect가 여러 번 호출되는 이유를 설명합니다.
window.onpageshow는 사용자가 뒤로 버튼을 눌러 페이지로 이동해도 기능합니다.이는 뒤로 버튼을 사용하여 페이지로 돌아가도 실행되지 않는 use-effect hook의 두 번째 인수로 빈 배열을 전달하는 것과는 다릅니다(초기 페이지 로드의 일부 형식에서는 발생하지 않습니다).
useEffect(() => {
window.onpageshow = async function() {
setSomeState(false)
let results = await AsyncFunction()
console.log(results, 'Fires on on first load,
refresh, or coming to the page via the back button')
};
};
나는 인터넷에서 얼마간의 시간을 보낸 후에 알게 되었다.useEffect는 컴포넌트 마운트에서 한 번 실행한 후 컴포넌트를 마운트 해제하고 다시 마운트하고 useEffect를 다시 실행합니다.React 문서에서 더 자세히 확인해야 합니다. 왜 그렇게 하는지 말입니다.
그래서 커스텀 훅을 사용했어요.마운트 해제 시 useRef 상태를 변경해야 합니다.이 경우 return 문을 잊지 마십시오.컴포넌트가 마운트 해제되면 useEffect는 반환 후 정리 기능을 실행합니다.
import React, { useEffect, useRef } from "react"
const useDidMountEffect = (
func: () => void,
deps: React.DependencyList | undefined
) => {
const didMount = useRef(false)
useEffect(() => {
if (didMount.current) {
func()
}
return () => {
didMount.current = true
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps)
}
export default useDidMountEffect
통상의 useEffect와 같이 사용:
useDidMountEffect(() => {
// your action
}, [])
렌더링 후 함수를 사용 중인 상태로 호출할 경우 빈 배열을 사용 효과에 대한 두 번째 인수로 추가합니다.
useEffect=(()=>{
functionName(firstName,lastName);
},[firstName,lastName])
언급URL : https://stackoverflow.com/questions/53120972/how-to-call-loading-function-with-react-useeffect-only-once
'source' 카테고리의 다른 글
| Concurrent Skip List Set은 언제 도움이 됩니까? (0) | 2022.09.25 |
|---|---|
| 현재 PHP 페이지 이름을 가져오는 방법 (0) | 2022.09.25 |
| 속성 파일에서 목록 읽기 및 스프링 주석 @Value 로딩 (0) | 2022.09.25 |
| JavaScript 개체에서 키를 제거하려면 어떻게 해야 합니까? (0) | 2022.09.25 |
| Python의 디렉터리에 있는 여러 파일 이름 바꾸기 (0) | 2022.09.24 |