반작용 갈고리흐름

React 구성 요소에서 연결된 핵심 개념을 이해하는 것이 중요하다.이것은 우리가 연결을 사용하는 자신감을 증가시키고, React 구성 요소에서 실제로 발생하는 일을 이해하는 데 도움을 줄 것이다.
이 글은react 구성 요소의 갈고리 흐름에 대한 이해를 높이기 위해 가장 곤혹스러운useEffect 갈고리에 주목한다.
예전과 같이 자바스크립트부터 시작합시다.
다음 함수를 보십시오. 문자열을 되돌려줍니다.

function App(){
  return 'Hello World';
}

const text = App();
console.log(text); // logs 'Hello World'

우리는 App 함수가 되돌아오는 값을 변수text에 저장하여 컨트롤러에 표시할 것이다.우리는 Javascript가 한 번에 한 줄만 실행할 수 있는 단일 라인이라는 것을 안다.실행 절차는 위에서 아래로 내려간다.
우리가 코드를 실행할 때 이런 상황이 발생할 것이다

Javascript 엔진은 첫 번째 줄에서 세 번째 줄까지의 함수 성명을 먼저 보았다

그리고 다섯 번째 줄로 가면 함수가 호출되는 것을 볼 수 있습니다.

그런 다음 JS 엔진에서 함수를 호출하여 반환된 값을 부여합니다.text 변수.

다음 줄에 텍스트가 콘솔에 표시됩니다.

현재 우리는 자바스크립트의 절차를 대체적으로 이해했다. 리얼리티 구성 요소 중의 useEffect() 갈고리를 연구하고, 언제 호출되고, 어떤 순서로 호출되는지 연구하자.

반응 효과

React 중의useEffect가 React 구성 요소의 세 가지 생명주기 단계에 대한 영향을 연구해 봅시다.

브래킷

업데이트

제거

산에 미친 영향

다음 react 구성 요소 보기

function App(){
  React.useEffect(() => {
    console.log('useEffect Ran!')
  }, []);

  return(
    <div>Hello, World!</div>
  )
}

이 코드를 훑어보고 빈 [] 의존항이 있는useEffect를 찾았을 때, 이 갈고리가 mount에서만 실행되는 것을 알 수 있습니다. ((componentDidMount 와 완전히 같습니다.네, 네 말이 맞아요. 산에서 운행하고 있어요.그래서 콘솔에서 이걸 볼 수 있어요.

useEffect Ran! 

한 가지 예를 들어, 의존항 중 하나는useEffect입니다.

function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log("Count Changed");
  }, [count]);

  return (
    <button
      onClick={() => {
        setCount((c) => c + 1);
      }}
    >
      {count}
    </button>
  );
}

이것은 react 구성 요소를 스캔하고 [count] 의존항이 있는useEffect를 찾을 때 count 변화가 발생할 때 그것을 실행할 것이라고 생각하는 전형적인 반례이다.
따라서, 첫 번째 렌더링 시, 계수가 0이고 변경되지 않았습니다. 단추를 눌렀을 때 count 변경되어useEffect 갈고리를 호출할 수 있습니다. 맞습니까?우리 한번 봅시다!
이것은 구성 요소를 처음 설치할 때 기록한 내용입니다.

Count Changed

뭐?우리는 심지어 버튼을 누르지 않았지만,useEffect가 실행되었다.왜?
갈고리는 부작용으로 주로 구성 요소의 부작용을 수행하는데 사용되며 흔히 볼 수 있는 부작용은 데이터 획득이다.
클래스 생명주기 방법에 비해 갈고리 중의 어떤 의존항을 언급하면 갈고리가 componentDidUpdate와 유사해진다.만약 당신이 componentDidUpdate 있다면, 그것은 여전히 적재 단계에서 호출될 것입니다.
이것이 바로 연결고리의 설계 원리다.의존항을 얼마나 지정하든지, 갈고리를 얼마나 만들었든지, 모든 갈고리는 구성 요소의 마운트 단계에서 호출됩니다.

If you are curious to know why the hooks are designed in this way, take a look at Fun with React Hooks in which Ryan Florence live codes useEffect hook and explains why hooks should only be called in the top level of react component

마운트 단계가 완료되면 count 변경 사항이 발생하면 상기 반례의useEffect를 호출합니다.

React.useEffect(() => {
  console.log("Count Changed");
}, [count]);

따라서 이 절의 요점은

Every hook in a component would be called on the mount phase (with or without the dependencies specified).

제거 시 사용 효과

이제 다음 마운트 해제 행위의 예를 살펴보자.

function Child() {
  React.useEffect(() => {
    console.log("Child useEffect Ran!");

    return () => {
      console.log("cleanUp of Child useEffect Ran!");
    };
  }, []);

  return <div>Hello, From Child!</div>;
}

export default function App() {
  const [showChild, setShowChild] = React.useState(false);

  React.useEffect(() => {
    console.log("useEffect Ran!");

    return () => {
      console.log("cleanUp of useEffect Ran!");
    };
  }, []);

  return (
    <div>
      <div>Hello, World!</div>
      {showChild ? <Child /> : null}
      <button
        onClick={() => {
          setShowChild((b) => !b);
        }}
      >
        {showChild ? "Hide" : "Show"} Child
      </button>
    </div>
  );
}

우리 아버지 App 구성 요소는 Child 구성 요소를 보여 줍니다. 이 구성 요소는useEffect와 청소 기능을 가지고 있습니다.이 정리는 서브어셈블리가 제거될 때 수행됩니다.따라서 어셈블리를 렌더링하고 하위 항목 숨기기/표시 버튼을 전환하면 적절한 로그가 표시됩니다.

같은 구성 요소에 3개의useEffects가 있고, 이 모든 것이 청소 함수로 되돌아오면, 이 구성 요소를 마운트 해제할 때, 모든 청소 함수를 호출합니다.
다음 행동을 보도록 하겠습니다.

function Child() {
  React.useEffect(() => {
    console.log("No Dependency!");

    return () => {
      console.log("cleanUp of No Dependency Ran!");
    };
  });

  React.useEffect(() => {
    console.log("Empty Dependency!");

    return () => {
      console.log("cleanUp of Empty Dependency Ran!");
    };
  }, []);

  return <div>Hello, From Child!</div>;
}

출력

배달

When the component is unmounted, cleanup function from all the useEffects would be executed.

클래스 구성 요소에 비해 우리는 하나componentWillUnmount밖에 없습니다. 이것은 이 구성 요소의 마운트 해제 단계에서 실행되는 유일한 부분입니다.

업데이트 시 사용 효과

흥미로운 것은 의존항을 지정하고 지정한 의존항의 변경 사항으로 효과를 다시 실행할 때 갈고리를 실행하기 전에 청소 함수를 실행합니다.
이런 행위를 하나의 예로 봅시다.콘솔 부분을 열고 버튼을 눌러보세요.

You can play around with the useEffect flow sandbox to see when each effect is getting called and its order.

처음 불러올 때 App 실행 중인useEffects를 보았습니다. no-deps 갈고리를 실행하기 전에 Increment count 단추를 누르면 cleanup 함수를 실행합니다.

▶️ App Render Start 
🛑 App Render End 
 App: useEffect no deps Cleanup 🧹
🌀 App: useEffect no deps 

예를 들어, 프로그램의 no-deps 갈고리를 실행하기 전에 Show Child 단추를 누르면 청소를 실행합니다.

▶️ App Render Start 
🛑 App Render End 
       ▶️ Child Render Start 
       🛑 Child Render End 
 App: useEffect no deps Cleanup 🧹
       🌀 CHILD: useEffect empty [] 
       🌀 CHILD: useEffect no deps 
🌀 App: useEffect no deps 

위에서 말한 바와 같이 from React v17, 심지어 하위 구성 요소의useEffect를 실행하기 전에 부모 구성 요소 효과의 정리를 실행합니다.
다음은 모래상자의 전체 요약이다.청소 함수는 업데이트/다시 렌더링 단계에서 훅을 실행하기 전에 실행되는 것을 볼 수 있습니다.나는 주의할 수 있도록 청소 작업을 더 큰 글씨체로 강조했다.

관건은,

React, when re-running an useEffect, it executes the clean up function before executing the hook.

이 그림flow-chart by donavon에서 갈고리가 흐르는 전모를 알 수 있다

나는 이 문장이 네가 useEffecthook의 절차를 이해하는 데 도움을 줄 수 있기를 바란다.
총결산

1. Every hook in a component would be called on the Mount phase (with or without the dependencies specified).
2. When the component is unmounted, cleanup function from all the useEffects are executed.
3. React, when rerunning an useEffect, it executes the clean up function before executing the hook.

감사합니다:

Epic React by Kent.C.Dodds

A Complete Guide to useEffect by Dan Abramov