리 액트 후크는 componentWillUnmount에 대해서만 useEffect () 정리를 사용합니까?

내 문제를 쉽게 묻기 위해이 코드의 결과를 설명하겠습니다.

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div>
                <div>
                    <span>{name}</span>
                </div>
                <div>
                    <span>{username}</span>
                </div>
            </div>
        </div>
    );
};

때 ForExample component마운트는, '효과는'기록됩니다. 이것은 componentDidMount().

그리고 이름 입력을 변경할 때마다 '효과'와 '정리'가 모두 기록됩니다. 반대로 [username]두 번째 매개 변수를 추가했기 때문에 사용자 이름 입력을 변경할 때마다 메시지가 기록되지 않습니다 useEffect(). 이것은componentDidUpdate()

마지막으로 ForExample component마운트 해제시 'cleaned up'이 기록됩니다. 이것은 componentWillUnmount().

우리 모두 알고 있습니다.

요약하면 구성 요소가 다시 렌더링 될 때마다 '정리 됨'이 호출됩니다 (마운트 해제 포함).

이 구성 요소가 마운트 해제 된 순간 만 '정리 됨'으로 기록되도록하려면의 두 번째 매개 변수를로 변경하면 useEffect()됩니다 [].

그러나 만약 내가 변화 [username]로 [], ForExample component더 이상 구현하는 componentDidUpdate()이름을 입력합니다.

내가하고 싶은 것은 구성 요소가 componentDidUpdate()이름 입력과 componentWillUnmount(). (구성 요소가 마운트 해제되는 순간에만 '정리 됨'로깅)

정리가에 종속되지 않기 때문에 두 번째 인수로 빈 배열이 제공되는 username별도의 정리를 넣을 수 useEffect있습니다.

예

const { useState, useEffect } = React;

const ForExample = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  useEffect(
    () => {
      console.log("effect");
    },
    [username]
  );

  useEffect(() => {
    return () => {
      console.log("cleaned up");
    };
  }, []);

  const handleName = e => {
    const { value } = e.target;

    setName(value);
  };

  const handleUsername = e => {
    const { value } = e.target;

    setUsername(value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={handleName} />
        <input value={username} onChange={handleUsername} />
      </div>
      <div>
        <div>
          <span>{name}</span>
        </div>
        <div>
          <span>{username}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  return shouldRender ? <ForExample /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

하나 이상의 useEffect를 사용할 수 있습니다.

예를 들어 내 변수가 data1이면 내 구성 요소에서이 모든 것을 사용할 수 있습니다.

useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("will update data1"), [ data1 ] );
useEffect( () => console.log("will update any") );
useEffect( () => () => console.log("will update data1 or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );

function LegoComponent() {

  const [lego, setLegos] = React.useState([])

  React.useEffect(() => {
    let isSubscribed = true
    fetchLegos().then( legos=> {
      if (isSubscribed) {
        setLegos(legos)
      }
    })
    return () => isSubscribed = false
  }, []);

  return (
    <ul>
    {legos.map(lego=> <li>{lego}</li>)}
    </ul>
  )
}

위 코드에서 fetchLegos 함수는 promise를 반환합니다. useEffect 범위에 조건을 지정하여 프라 미스를 "취소"하여 컴포넌트가 마운트 해제 된 후 앱이 상태를 설정하지 못하도록 할 수 있습니다.

경고 : 마운트 해제 된 구성 요소에서 React 상태 업데이트를 수행 할 수 없습니다. 이것은 작동하지 않지만 응용 프로그램의 메모리 누수를 나타냅니다. 수정하려면 useEffect 정리 함수에서 모든 구독 및 비동기 작업을 취소하세요.

useEffect는 자체 범위 내에서 격리되고 그에 따라 렌더링됩니다. https://reactjs.org/docs/hooks-custom.html의 이미지

너무 많은 복잡한 함수와 메서드를 만드는 대신 이벤트 리스너를 만들고 수동으로 수행하는 것에 대해 걱정할 필요없이 자동으로 마운트 및 마운트 해제를 수행합니다. 여기에 예가 있습니다.

//componentDidMount
useEffect( () => {

    window.addEventListener("load",  pageLoad);

    //component will unmount
    return () => {
       
        window.removeEventListener("load", pageLoad);
    }

 });

이제이 부분이 완료되었으므로 이와 같이 pageLoad 함수에서 원하는 것을 실행합니다.

const pageLoad = () =>{
console.log(I was mounted and unmounted automatically :D)}