React 함수/Hooks 컴포넌트에 componentDismount가 동등합니까?

React 함수/Hooks 컴포넌트에 componentDismount가 동등합니까?

「 「 」를 시뮬레이트 하는 ?componentDidMount후크를 통해 기능 컴포넌트를 반응시킬 수 있습니까?

안정된 버전의 훅(React 버전 16.8.0+)

★★★의 componentDidMount

useEffect(() => {
  // Your code here
}, []);

★★★의 componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);

★★★의 componentWillUnmount

useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);

따라서 이 경우 종속성을 이 어레이에 전달해야 합니다.이런 상태가 있다고 가정해 봅시다.

const [count, setCount] = useState(0);

그리고 카운트가 증가할 때마다 기능 구성요소를 다시 렌더링해야 합니다. 당신의 ★★★★★★★★★★★★★★★★★.useEffect 이어야 한다

useEffect(() => {
  // <div>{count}</div>
}, [count]);

이렇게 하면 카운트가 업데이트될 때마다 구성 요소가 다시 렌더링됩니다.이게 조금이나마 도움이 됐으면 좋겠다.

에 대한 정확한 등가는 없다.componentDidMount리액트 훅으로.

---

리액트 할 때 으로는 리액트 훅을 는 안 .componentDidMount.

이와 같이 후크를 사용하여 다음과 같은 효과를 낼 수 있는 방법이 있습니다.componentDidMount.

해결책 1:

useEffect(() => {
  console.log("I have been mounted")
}, [])

해결책 2:

const num = 5

useEffect(() => {
  console.log("I will only run if my deps change: ", num)
}, [num])

솔루션 3(기능 포함):

useEffect(() => {
  const someFunc = () => {
    console.log("Function being run after/on mount")
  }
  someFunc()
}, [])

솔루션 4(use Callback):

const msg = "some message"

const myFunc = useCallback(() => {
  console.log(msg)
}, [msg])

useEffect(() => {
  myFunc()
}, [myFunc])

솔루션 5 (창의력을 발휘하는 것):

export default function useDidMountHook(callback) {
  const didMount = useRef(null)

  useEffect(() => {
    if (callback && !didMount.current) {
      didMount.current = true
      callback()
    }
  })
}

솔루션 5는 다른 솔루션이 모두 고객의 사용 사례에 적합하지 않은 경우에만 사용해야 합니다.솔루션 5가 필요하다고 판단될 경우 이 훅 use-did-mount를 사용할 것을 권장합니다.

출처(상세 기재):리액트 훅에서 componentDidMount 사용

componentDidMount에서는 동작하고 만, 할 수 .useEffect

인수로 빈 합니다.useEffect()마운트 상에서만 콜백만 실행합니다.

의 메뉴얼을 참조해 주세요.

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#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>

useEffect() 훅을 사용하면 componentDidMount, componentDidUpdate componentWillUnMount 기능을 사용할 수 있습니다.

useEffect()의 다른 구문을 사용하면 위의 각 메서드를 실현할 수 있습니다.

i) component Did Mount

useEffect(() => {
  //code here
}, []);

ii) component Did Update

useEffect(() => {
  //code here
}, [x,y,z]);

//where x,y,z are state variables on whose update, this method should get triggered

iii) 컴포넌트 Did Unmount

useEffect(() => {
  //code here
  return function() {
    //code to be run during unmount phase
  }
}, []);

자세한 내용은 공식 반응 사이트를 참조하십시오.후크에 대한 공식 리액트

수락된 답변은 작동하지만 권장되지 않습니다.둘 이상의 상태가 있고 useEffect와 함께 사용하면 종속성 배열에 추가하거나 전혀 사용하지 않는 것에 대한 경고가 표시됩니다.

예기치 않은 출력이 발생하는 문제가 발생할 수 있습니다.그래서 나는 당신이 당신의 기능을 클래스로 다시 쓰도록 약간의 노력을 기울이기를 권합니다.변경은 거의 없으며 일부 컴포넌트는 클래스로, 일부는 기능으로 사용할 수 있습니다.하나의 규약만 사용할 의무는 없습니다.

예를 들면

function App() {
  const [appointments, setAppointments] = useState([]);
  const [aptId, setAptId] = useState(1);

  useEffect(() => {
    fetch('./data.json')
      .then(response => response.json())
      .then(result => {
        const apts = result.map(item => {
          item.aptId = aptId;
          console.log(aptId);
          setAptId(aptId + 1);
          return item;
        })
        setAppointments(apts);
      });
  }, []);

  return(...);
}

그리고.

class App extends Component {
  constructor() {
    super();
    this.state = {
      appointments: [],
      aptId: 1,
    }
  }

  componentDidMount() {
    fetch('./data.json')
      .then(response => response.json())
      .then(result => {
        const apts = result.map(item => {
          item.aptId = this.state.aptId;
          this.setState({aptId: this.state.aptId + 1});
          console.log(this.state.aptId);
          return item;
        });
        this.setState({appointments: apts});
      });
  }

  render(...);
}

이것은 예에 지나지 않습니다.따라서 코드의 베스트 프랙티스나 잠재적인 문제에 대해서는 언급하지 않습니다.둘 다 같은 논리를 가지고 있지만 후자는 예상대로만 작동합니다.이 시간 동안 useEffect가 실행되어 componentDidMount 기능이 제공될 수 있지만 앱이 커짐에 따라 몇 가지 문제가 발생할 수 있습니다.그렇기 때문에 그 단계에서 다시 쓰는 것보다 초기에 다시 쓰는 것이 좋습니다.

게다가 OOP도 나쁘지 않습니다.프로시저 지향 프로그래밍으로 충분했다면 객체 지향 프로그래밍은 없었을 것입니다.때로는 고통스럽지만, (기술적으로는) 나아졌다.개인적인 문제는 제쳐두고)

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

이 공식 문서를 방문하세요.최신 방식을 이해하기 쉽습니다.

https://reactjs.org/docs/hooks-effect.html

후크 내부의 비동기 기능에 대한 정보:

효과 콜백은 레이스 조건을 방지하기 위해 동기화됩니다.비동기 함수를 내부에 넣습니다.

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

useLayoutEffect 훅이 가장 좋은 대체 수단입니다.ComponentDidMount리액트 훅에 있습니다.

useLayoutEffect는 렌더링 및 "UI"보다 먼저 됩니다.useEffectUI를 사용합니다.츠키노

플플: :

import { useLayoutEffect, useEffect } from "react";

export default function App() {
  useEffect(() => {
    console.log("useEffect Statements");
  }, []);

  useLayoutEffect(() => {
    console.log("useLayoutEffect Statements");
  }, []);
  return (
    <div>
      <h1>Hello Guys</h1>
    </div>
  );
}
 

하려고 합니다.useEffect()componentDidMount()는 componentDidMount()로 지정합니다.

예: 커스텀을 사용할 수 있습니다.loaded상태 속성은 처음에 false로 설정되며 렌더링 시 true로 전환되며 이 값이 변경되었을 때만 효과가 발생합니다.

문서

네, 시뮬레이트 하는 방법이 있습니다. componentDidMount React 기능 컴포넌트에서

면책사항: 여기서 진짜 문제는 '컴포넌트 라이프 사이클 사고방식'에서 '사용효과 마인드셋'으로 변경해야 한다는 것입니다.

리액트 컴포넌트는 아직 javascript 함수이기 때문에 어떤 것을 실행하기 전에 먼저 위에서 아래로 실행하기만 하면 됩니다.이 기능을 생각하면 다음과 같은 기능이 있습니다.

const myFunction = () => console.log('a')
const mySecondFunction = () => console.log('b)

mySecondFunction()
myFunction()

/* Result:
'b'
'a'
*/

그건 정말 간단하죠, 그렇죠?

const MyComponent = () => {
const someCleverFunction = () => {...}

someCleverFunction() /* there I can execute it BEFORE 
the first render (componentWillMount)*/

useEffect(()=> {
  someCleverFunction() /* there I can execute it AFTER the first render */ 
},[]) /*I lie to react saying "hey, there are not external data (dependencies) that needs to be mapped here, trust me, I will leave this in blank.*/

return (
 <div>
   <h1>Hi!</h1>
 </div>
)}

그리고 이 특정한 경우에 그것은 사실이다.하지만 내가 그런 짓을 하면 어떻게 될까?

const MyComponent = () => {
const someCleverFunction = () => {...}

someCleverFunction() /* there I can execute it BEFORE 
the first render (componentWillMount)*/

useEffect(()=> {
  someCleverFunction() /* there I can execute it AFTER the first render */ 
},[]) /*I lie to react saying "hey, there are not external data (dependencies) that needs to be maped here, trust me, I will leave this in blank.*/
return (
 <div>
   <h1>Hi!</h1>
 </div>
)}

여기서 정의하는 "cleverFunction"은 컴포넌트의 모든 리렌더에서 동일하지 않습니다.이로 인해 몇 가지 심각한 버그가 발생하고 경우에 따라서는 컴포넌트의 불필요한 리렌더 또는 무한 리렌더 루프가 발생합니다.

이 문제의 진짜 문제는 React 기능 컴포넌트가 useEffect 후크(특히 useEffect 후크) 덕분에 상태에 따라 여러 번 "스스로 실행"되는 함수라는 것입니다.

즉, 이펙트는 화면에 표시되는 모든 것과 데이터를 동기화하도록 특별히 설계된 후크입니다.데이터가 변경되면 useEffect 후크에서 항상 이를 인식해야 합니다.여기에는 방식도 포함되므로 어레이 의존성이 포함됩니다.정의되지 않은 상태로 두면 찾기 어려운 버그에 노출됩니다.

그 때문에, 「리액트」의 방법으로 원하는 것을 얻기 위해서 무엇을 할 수 있는지를 아는 것이 중요합니다.

const initialState = {
  count: 0,
  step: 1,
  done: false
};

function reducer(state, action) {
  const { count, step } = state;
  if (action.type === 'doSomething') {
    if(state.done === true) return state;
    return { ...state, count: state.count + state.step, state.done:true };
  } else if (action.type === 'step') {
    return { ...state, step: action.step };
  } else {
    throw new Error();
  }
}

const MyComponent = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
    dispatch({ type: 'doSomething' });
}, [dispatch]);

return (
 <div>
   <h1>Hi!</h1>
 </div>
)}

useReducer의 디스패치 방식은 정적이기 때문에 컴포넌트가 재렌더되는 횟수에 관계없이 동일한 방식이 됩니다.따라서 컴포넌트를 마운트한 후에 한 번만 실행할 경우 위의 예시와 같은 작업을 수행할 수 있습니다.이것은 올바르게 하기 위한 선언적인 방법이다.

출처: 이펙트 사용을 위한 완전한 가이드 - Dan Abramov 작성

실험하는 것을 좋아하고 어떻게 하는지 알고 싶다면 "필수 와트"를 사용할 수 있습니다.useRef()카운터 또는 부울을 사용하여 ref가 정의된 참조를 저장하는지 여부를 확인합니다. 이는 필수 접근법이며 커튼 뒤에서 반응에서 일어나는 일에 익숙하지 않은 경우에는 피하는 것이 좋습니다.

그 이유는 useRef()는 렌더링의 양에 관계없이 전달된 인수를 저장하는 후크이기 때문입니다(문제의 초점이 아니기 때문에 단순하게 하고 있습니다.useRef에 관한 이 놀라운 기사를 읽어보실 수 있습니다).따라서 컴포넌트의 첫 렌더링이 언제 이루어졌는지를 알 수 있는 최선의 접근법입니다.

「외부」효과와 「내부」컴포넌트 상태를 동기화하는 3가지 방법을 나타내는 예를 나타냅니다.

여기서 바로 이 스니펫을 실행하여 로그를 확인하고 이들 3가지 기능이 언제 실행되는지 파악할 수 있습니다.

const { useRef, useState, useEffect, useCallback } = React

// External functions outside react component (like a data fetch)

function renderOnce(count) {
    console.log(`renderOnce: I executed ${count} times because my default state is: undefined by default!`);
}

function renderOnFirstReRender(count) {
    console.log(`renderOnUpdate: I executed just ${count} times!`);
}

function renderOnEveryUpdate(count) {
    console.log(`renderOnEveryUpdate: I executed ${count ? count + 1 : 1} times!`);
}

const MyComponent = () => {
    const [count, setCount] = useState(undefined);

    const mounted = useRef(0);

    // useCallback is used just to avoid warnings in console.log
    const renderOnEveryUpdateCallBack = useCallback(count => {
        renderOnEveryUpdate(count);
    }, []);

    if (mounted.current === 0) {
        renderOnce(count);
    }

    if (mounted.current === 1) renderOnFirstReRender(count);

    useEffect(() => {
        mounted.current = mounted.current + 1;
        renderOnEveryUpdateCallBack(count);
    }, [count, renderOnEveryUpdateCallBack]);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(prevState => (prevState ? prevState + 1 : 1))}>TouchMe</button>
        </div>
    );
};

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>hI!</h1>
            </div>
        );
    }
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
  <MyComponent/>
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

이 작업을 실행하면 다음과 같은 결과가 나타납니다.

componentDidMount()와 동일한 후크는 다음과 같습니다.

useEffect(()=>{},[]);

이것이 도움이 되기를 바랍니다:)

언급URL : https://stackoverflow.com/questions/53945763/componentdidmount-equivalent-on-a-react-function-hooks-component