대응: useEffect vs useMemo vs useState

대응: useEffect vs useMemo vs useState

나는 웹에서 이것에 대한 간결한 답을 찾으려고 노력했지만 운이 없었다.

문항은 다 다르다, 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 다르고 요?useEffect,useMemo ★★★★★★★★★★★★★★★★★」useState

• 다. useState ★★★★★★★★★★★★★★★★★」useMemo는 렌더링 전체에서 값을 기억합니다.츠키다
  • useMemo만, 「재연결이 없다」라고 하는 것은,useState
  • useMemo 경우setSomeState된 두 번째 )useState 어레이를 있지 않습니다.이치노
• 다. useMemo ★★★★★★★★★★★★★★★★★」useEffect는 의존관계가 변경되었을 경우에만 실행됩니다(존재하는 경우).츠키다
  • useEffect렌더가 발생한 후 실행되며,useMemo보다 먼저 실행

제가 놓친 다른 주요 차이점이 있나요?

당신의 요점은 기본적으로 옳습니다.몇 가지 사소한 설명은 다음과 같습니다.

useState가 setState 메서드의 호출로 리렌더를 발생시키고 있습니다(배열 내의 두 번째 요소가 반환됩니다).useMemo 또는 useEffect와 같은 종속성은 없습니다.

useMemo는 의존관계 배열의 요소가 변경된 경우에만 값을 재계산합니다(의존관계가 없는 경우, 즉 어레이가 비어 있는 경우, 한 번만 재계산됩니다).배열을 생략하면 모든 렌더에서 다시 계산됩니다.함수를 호출해도 재렌더는 발생하지 않습니다.또한 컴포넌트의 렌더링 중에 실행되며 그 전에는 실행되지 않습니다.

의존관계 배열의 요소가 변경되었거나 배열이 누락된 경우 각 렌더 후에 useEffect가 호출됩니다.어레이가 비어 있으면 초기 마운트에서 한 번만 실행됩니다(정리 함수를 반환한 경우 마운트 해제).

Hooks API Reference는 언제든지 확인할 수 있습니다. 제 생각에는 꽤 확실한 문서입니다.

• " " "useEffect(callback, [dependency])void 그 다음에 이 됩니다.render().
• " " "useMemo(callback, [dependency]) 않다void, 과 It during during DURING 입니다.render().

useEffect() can can can can useMemo()다음과 같은 경우

• 값비싼 계산에 사용되는 상태 변수(예: count1)가 useEffect의 유일한 종속성입니다.
• 비용이 많이 드는 계산된 값을 상태 변수에 저장하는 것이 문제가 되지 않는 경우.

const [count1, setCount1] = useState(0);
const [expensiveValue, setExpensiveValue] = useState(null);
useEffect(() => {
    console.log("I am performing expensive computation");
    setExpensiveValue(((count1 * 1000) % 12.4) * 51000 - 4000);
  }, [count1]);   

• 다른 점이 있다면useEffect()에 의해 비용이 드는 을 사용할 수 됩니다.render() 동시에useMemo()는 이 .render().
• 이 값은 가 되지 않습니다.useEffect()그리고.useMemo()둘 다 브라우저가 그림을 완성하기 전에 값을 사용할 수 있도록 합니다.

useMemo 컴포넌트에 속하지만 반드시 컴포넌트 상태에 속하지는 않는 계산/값을 메모하는 데 사용됩니다(예: 컴포넌트에 의존하며 값을 반환해야 하는 방법).

  const validEmail = React.useMemo(() => validateEmail(email), [email])
  /* Now use 'validEmail' variable across the component, 
     whereas 'useEffect' return value is void and only used for unmounting duties, 
     like unsubscribing from subscription e.g. removeInterval*/

docs에서:

useMemo에 전달된 함수는 렌더링 중에 실행됩니다.렌더링 중에는 보통 하지 않는 작업은 하지 마십시오.예를 들어, 부작용은 useEffect에 속하며 useMemo에 속하지 않습니다.

---

useEffect 부작용:

돌연변이, 서브스크립션, 타이머, 로깅 및 기타 부작용

setState의setTimeout의setInterval'ref할당, API 호출 또는 대량의 계산을 수행하지 않는 모든 항목이 여기에 속합니다.

또한 최적화에는 비용이 수반되므로 React는 다음을 사용할 것을 제안합니다.useMemo메모화/최적화가 필요한 경우 및 기타 경우에 의존할 경우에만useEffect필요한 경우:

useMemo는 시멘틱 보증이 아닌 퍼포먼스 최적화로 사용할 수 있습니다.

향후 React는 이전에 메모된 값을 "잊어버리고" 다음 렌더링 시 재계산하도록 선택할 수 있습니다(예: 오프스크린 컴포넌트용 메모리 확보).useMemo 없이도 동작하도록 코드를 작성한 후 추가하여 성능을 최적화합니다.

---

[state, setState] = useState()즉, 재발송신 및 콜 중에 안정된 상태를 유지하는 특정 상태 변수를 갱신하는 것입니다.setState재연결을 트리거합니다.이 갈고리의 목적은 위의 두 갈고리와 그다지 관련이 없습니다.

언급URL : https://stackoverflow.com/questions/56347639/react-useeffect-vs-usememo-vs-usestate