연결 § 어셈블리 라이프 사이클 반응

이전 글에서, 나는 우리가 연결을 이용할 수 있도록 클래스 구성 요소를 기능 구성 요소로 바꾸는 방법을 설명했다.
다음은 글의 링크입니다.

React 갈고리: 클래스 구성 요소를 함수로 이동하고 갈고리를 사용합니다.

아난드 쿠마르・ 2019년 5월 12일・ 5분 읽기

#react #reacthooks #javascript

이 글은react와 연결된 구성 요소의 생명 주기와 같은 출력을 사용하는 방법을 이해하는 데 도움을 줄 것입니다.
다음 라이프 사이클 방법에 대해 설명합니다.

componentWillMount

componentDidMount

componentDidUpdate

shouldComponentUpdate

componentWillUnmount

시작하기 전에 다음 연결에 대해 알아보겠습니다.

useState

useEffect### 사용 상태useState 상태 값과 업데이트된 함수를 반환합니다.
#### 구문:

### 사용 효과
기능 구성 요소에 대해 우리는 구성 요소 주체 내에서 돌연변이, 타이머, 돌연변이 또는 기타 부작용이 발생하는 것을 허락하지 않는다.

따라서 여기에는 렌더링이 발생한 후에 실행되는 useEffect 이 있습니다.기본적으로 효과는 매번 렌더링된 후에 실행되지만, 일부 방법은 효과를 제어할 수 있기 때문에 우리는 본고의 뒤에서 연구를 진행할 것이다.

구문:

연결이나react가 제공하는 기타 연결에 대한 자세한 정보는 공식 문서를 참조하십시오.
그러면 구성 요소의 생명 주기부터 어떻게 갈고리로 구성 요소를 교체하는지 이해해 봅시다.

Pro Tip: Do not use hooks inside any code blocks. It must be at the top level hierarchy of the functional component.

작은 응용 프로그램의 실행 예시를 봅시다.이런 용법은 클래스 기반의 구성 요소와 생명 주기를 반영한다.본고의 마지막으로, 기능 구성 요소를 사용하여 만든 같은 프로그램을 검사할 수 있으며, 유사한 생명주기 실행을 가지고 있습니다.
시작합시다.

구성 요소가 설치됩니다.

모든 종류의 구성 요소를 기능 구성 요소로 변환할 때, 우리는 useState 상태를 정의하거나 (있다면) 코드가 렌더링 (jsx) 부분에 도착하기 전에 코드를 작성하여 componentWillMount 행위를 실현할 수 있습니다.우리가 알고 있는 바와 같이 코드 실행은 위에서 아래로 진행된다.

구성 요소 설치

앞에서 말한 바와 같이 우리는 두 번째 optional Parameter를 전달하여 useEffect 행위를 실현할 수 있다.아래의 코드 부분을 봅시다.

React.useEffect(()=>{
  console.log('Robot: componentDidMount');
  // ...code goes here...
  fetchData();
}, []);

위의 코드에서 다섯 번째 줄의 두 번째 매개 변수는 공백수 그룹componentDidMount이다.왜?🤔
알겠습니다. 두 번째 파라미터는 제공된 항목의 변화를 감지할 때만 호출 효과에 응답할 수 있기 때문입니다.이 수조는 우리가 [] 에서 첫 번째 매개 변수로 전달한 함수의 의존항이다.
이런 상황에서 그것은 공백이다. 이것은 영원히 어떤 변경도 감지하지 못할 것이기 때문에 한 번만 호출할 수 있다는 것을 의미한다.이거 useEffect 한 거 아니에요?한 번만 호출하는 거 맞죠?

Please note that if the second argument is not passed in useEffect, it will execute always after render.

구성 요소 업데이트

예를 들어 구성 요소의 모든 도구가 변경되면api 호출을 다시 호출해야 합니다. 구성 요소가 업데이트되면 여기서 호출합니다.우리는 componentDidMount를 사용하여 그것을 실현할 수 있다.그러나 이번에는 두 번째 매개 변수에 항목을 전달해야 한다.

React.useEffect(() => {
  console.log('Robot: componentWillUpdate');
  // code goes here
  fetchData();
}, [props.selectedRobotId]);

이번에 우리는 진열에서 하나의 도구useEffect를 전달했다.따라서 이 도구가 변경될 때마다 효과가 실행되고 업데이트된 구성 요소를 얻을 수 있습니다.

구성 요소를 업데이트해야 합니다.

이것은 좀 까다롭지만, 내가 너에게 이 점을 이해하도록 도와줄게.모두가 알다시피, 이러한 생명주기 방법은 우리가 구성 요소의 렌더링을 제어하는 데 도움이 된다.다음은 예입니다.

shouldComponentUpdate(nextProps, nextState) {
  console.log("Robot: shouldComponentUpdate");
  return (
    nextProps.selectedRobotId !== this.props.selectedRobotId ||
    nextState.loadedRobot.id !== this.state.loadedRobot.id ||
    nextState.isLoading !== this.state.isLoading
  );
}

그러나 기능 구성 요소에 대해react 구성 요소의 생명주기 방법을 이런 방식으로 사용할 수 없습니다.그렇다면 어떻게 같은 효과를 얻을 수 있을까?
네,react를 사용하세요. selectedRobotId라는 것이 있습니다.다음과 같이 구성 요소를 포장할 수 있습니다.

export default React.memo(Robot);

이것은 React.memo의 대체품처럼 보입니까?아니오
네, 그렇습니다.shouldComponentUpdate 두 번째 매개 변수(함수)를 수락합니다. 이 매개 변수는 React.memo 및 nextProps 에 대한 접근을 제공합니다.이것은 우리가 prevProps와 같은 목표를 실현하는 데 도움을 줄 수 있다.

export default React.memo(Robot, (prevProps, nextProps) => {
  console.log('Robot: shouldComponentUpdate');
  return nextProps.selectedRobotId === prevProps.selectedRobotId;
});

There is one thing to note here. This works opposite of shouldComponentUpdate. You return true if you do not want to re-render. You return false if you want it to render.

React는 이 점을 잘 처리할 수 있기 때문에 도구의 변경 사항을 다시 렌더링하지 않으려면 두 번째 함수가 필요합니다.그렇지 않으면 React에서 처리합니다.:)

구성 요소가 제거됩니다.

shouldComponentUpdate의 설명에서 useEffect 중 선택할 수 있는 반환 함수를 언급했다는 것을 기억하십시오.이 반환 함수는 정리에 사용됩니다.

React.useEffect(() => {
  console.log('Robot: componentDidUpdate');
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId])

위의 코드 세그먼트는 useEffect 코드 블록과 유사하지만, 현재 반환 함수가 있습니다.따라서 언제든지 componentDidUpdate 변경되면 이 효과는 실행되고 반환 함수는 효과가 완성될 때 호출되며 우리는 그 중에서 정리할 수 있다.
그러나 이것은 props.selectedRobotId 발생한 상황이 아니다.정당하다
좋습니다. componentWillUnmount을 실현하기 위해 코드에 componentWillUnmount 를 하나 더 추가하고 두 번째 파라미터를 공백수 그룹(useEffect으로 전달할 수 있습니다.[]과 유사하지만 componentDidMount 이번 내부에는 useEffect로 작업할 반환 함수가 있습니다.

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId]);

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('Robot: componentWillUnmount');
  }
}, []);

이것은 우리에게 두 차원에서 정리하는 방법을 제공했다.하나는 구성 요소가 업데이트될 때이고, 다른 하나는 구성 요소가 마운트 해제될 때입니다.

총결산

본고에서 우리는 componentWillUnmount과useState를 소개했다.그리고 우리는 useEffect과useEffect를 사용하여 클래스 기반 구성 요소의 구성 요소 생명주기 방법을 실현했다.
처음에는 곤혹스러워 보일 수도 있지만 걱정하지 마세요.이것은 같은 응용 프로그램에 사용되지만 React 연결을 사용하는 코드 펜입니다.
코드와 연습을 확인하세요.그 밖에 어떤 문제/염려가 있으면 언제든지 저에게 공유하거나 연락 주십시오.
즐겁게 공부하세요!