React 생명주기 원리 와 용법 구덩이 밟 기 노트

본 고의 실례 는 React 생명주기 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
반응 생명주기
라 이 프 사이클 개관
생명주기 의 상태
구성 요소 의 생명 주 기 는 세 가지 상태 로 나 눌 수 있 습 니 다:

마 운 트:실제 DOM

이 삽입 되 었 습 니 다.

Updating:다시 렌 더 링 되 고 있 습 니 다

Unmounting:실제 DOM

을 옮 겼 습 니 다.

componentWillMount 는 렌 더 링 전에 호출 되 고 클 라 이언 트 도 서버 에 있 습 니 다.

생명주기 소개
componentDidMount :
첫 번 째 렌 더 링 후 호출 은 클 라 이언 트 에 만 있 습 니 다.이후 구성 요 소 는 해당 하 는 DOM 구 조 를 생 성하 여 this.getDOMNode()를 통 해 접근 할 수 있 습 니 다.다른 자 바스 크 립 트 프레임 워 크 와 함께 사용 하고 싶다 면 이 방법 에서 setTimeout,setInterval 또는 AJAX 요청 등 을 호출 할 수 있 습 니 다.
componentWillReceiveProps
구성 요소 가 새로운 prop(업데이트 후)을 받 았 을 때 호출 됩 니 다.이 방법 은 render 를 초기 화 할 때 호출 되 지 않 습 니 다.
shouldComponentUpdate
불 값 을 되 돌려 줍 니 다.구성 요소 가 새로운 props 나 state 를 받 을 때 호출 됩 니 다.초기 화 할 때 나 forceUpdate 를 사용 할 때 호출 되 지 않 습 니 다.
구성 요 소 를 업데이트 할 필요 가 없다 는 것 을 확인 할 때 사용 할 수 있 습 니 다.
componentWillUpdate
구성 요소 가 새로운 props 나 state 를 받 았 지만 render 가 없 을 때 호출 됩 니 다.초기 화 할 때 호출 되 지 않 습 니 다.
componentDidUpdate
구성 요소 업데이트 완료 후 즉시 호출 합 니 다.초기 화 할 때 호출 되 지 않 습 니 다.
componentWillUnmount
구성 요소 가 DOM 에서 제거 되 기 전에 바로 호출 됩 니 다.
코드 표시

class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 

React 16.3 라 이 프 사이클
설치 하 다.
구성 요소 의 인 스 턴 스 를 만 들 고 DOM 에 삽입 할 때 다음 순서 로 이 방법 을 호출 합 니 다.
constructor()
React 구성 요소 의 구조 함수 가 설치 되 기 전에 호출 됩 니 다.React.Component 하위 클래스 의 구조 함 수 를 실현 할 때 슈퍼(props)는 다른 문 구 를 사용 하기 전에 호출 해 야 합 니 다.그렇지 않 으 면 this.props 는 구조 함수 에서 정의 되 지 않 아 오류 가 발생 할 수 있 습 니 다.
일반적으로 React 에서 구조 함 수 는 두 가지 목적 에 만 사 용 됩 니 다.
할당 대상 을 통 해 로 컬 상 태 를 초기 화 합 니 다 this.state.
이벤트 처리 프로그램 방법 을 인 스 턴 스 에 연결 합 니 다.
setState()에 constructor()에 전화 해 서 는 안 됩 니 다.반면 구성 요소 가 로 컬 상 태 를 사용 해 야 한다 면 구조 함수 에서 초기 상 태 를 this.state 로 지정 하 십시오.
구조 함 수 는 his.state 가 직접 분배 하 는 유일한 위치 입 니 다.모든 다른 방법 에서 this.setState()를 사용 해 야 합 니 다.
static getDerivedStateFromProps()
getDerived StateFromProps 는 render 방법 을 호출 하기 전에 호출 합 니 다.초기 설치 든 후속 업데이트 든.업데이트 상태의 대상 을 되 돌려 주거 나,업데이트 되 지 않 은 상태 로 null 을 되 돌려 야 합 니 다.
render()
render()방법 은 클래스 구성 요소 에서 유일 하 게 필요 한 방법 입 니 다.
호출 할 때 this.props 를 검사 하고 this.state 는 다음 형식 중 하 나 를 되 돌려 야 합 니 다.

React elements。보통 JSX 를 통 해 만 듭 니 다.

Arrays and fragments。렌 더 링 에서 여러 요 소 를 되 돌려 줍 니 다.더 자세 한 정 보 는 세 션 문 서 를 참조 하 십시오.

Portals。

문자열 과 숫자.그것들 은 DOM 에서 텍스트 노드 로 표 시 됩 니 다.

불 이나 null.아무 것 도 없다.4567918)
이 render()함 수 는 상태 가 없어 야 합 니 다.이것 은 구성 요소 상 태 를 수정 하지 않 고 호출 할 때마다 같은 결 과 를 되 돌려 주 며 브 라 우 저 와 직접 대화 하지 않 는 다 는 것 을 의미 합 니 다.
브 라 우 저 와 대화 할 필요 가 있다 면 componentDidMount()또는 다른 수명 주기 방법 을 실행 하 십시오.render()를 유지 하면 구성 요소 가 생각 하기 쉬 워 집 니 다.
shouldComponentUpdate()가 false 로 돌아 가면 render()가 호출 되 지 않 습 니 다.
componentDidMount()

componentDidMount()는 구성 요소(트 리 삽입)를 설치 한 후 즉시 호출 합 니 다.DOM 노드 의 초기 화가 필요 합 니 다.여기에 두 어야 합 니 다.원 격 터미널 에서 데 이 터 를 불 러 올 필요 가 있다 면 네트워크 요청 을 예화 하 는 좋 은 곳 입 니 다.

이 방법 은 구독 하기에 좋 은 곳 을 설정 하 는 것 이다.이렇게 하면 구독 취소 component WillUnmount()를 잊 지 마 십시오.

componentDidMount()에서 this.setState()를 즉시 사용 할 수 있 습 니 다.추가 렌 더 링 을 실행 하지만 브 라 우 저가 화면 을 업데이트 하기 전에 발생 합 니 다.이 보증 은 render()가 이러한 상황 에서 두 번 호출 되 더 라 도 사용 자 는 중간 상 태 를 보지 못 할 것 이다.이 모드 는 일반적으로 성능 문 제 를 일 으 킬 수 있 으 므 로 신중하게 사용 하 십시오.대부분의 경우 초기 상태 constructor()를 할당 할 수 있 을 것 입 니 다.단,크기 나 위치 에 의존 하 는 것 을 렌 더 링 하기 전에 DOM 노드 를 측정 해 야 할 때 모드 와 도구 알림 등 상황 을 처리 해 야 할 수도 있 습 니 다.

이 방법 들 은 남 겨 진 것 으로 여 겨 지 므 로 새로운 코드 에서 피해 야 한다.
UNSAFE_componentWillMount()
업데이트
props or state 의 변경 은 업 데 이 트 를 초래 할 수 있 습 니 다.구성 요 소 를 다시 렌 더 링 할 때 다음 순서 로 이 방법 을 호출 합 니 다.
static getDerivedStateFromProps()
render()
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate()는 최근 에 보 여 준 출력 이 DOM 과 같은 호출 에 제출 되 었 습 니 다.구성 요소 가 변경 가능 하기 전에 DOM 에서 정 보 를 캡 처 할 수 있 습 니 다(예 를 들 어 스크롤 위치).이 생명주기 가 되 돌아 오 는 모든 값 은 componentDidUpdate()에 매개 변수 로 전 달 됩 니 다.
이 사례 는 흔 하지 않 지만 스크롤 위 치 를 특수 하 게 처리 해 야 하 는 채 팅 스 레 드 등 UI 에 나타 날 수 있 습 니 다.
홈 페이지 의 예

class ScrollingList extends React.Component {
 constructor(props) {
  super(props);
  this.listRef = React.createRef();
 }

 getSnapshotBeforeUpdate(prevProps, prevState) {
  // Are we adding new items to the list?
  // Capture the scroll position so we can adjust scroll later.
  if (prevProps.list.length < this.props.list.length) {
   const list = this.listRef.current;
   return list.scrollHeight - list.scrollTop;
  }
  return null;
 }

 componentDidUpdate(prevProps, prevState, snapshot) {
  // If we have a snapshot value, we've just added new items.
  // Adjust scroll so these new items don't push the old ones out of view.
  // (snapshot here is the value returned from getSnapshotBeforeUpdate)
  if (snapshot !== null) {
   const list = this.listRef.current;
   list.scrollTop = list.scrollHeight - snapshot;
  }
 }

 render() {
  return (
   <div ref={this.listRef}>{/* ...contents... */}</div>
  );
 }
}

componentDidUpdate()
componentDidUpdate()업데이트 가 발생 하면 바로 호출 합 니 다.초기 렌 더 링 은 이 방법 을 사용 하지 않 습 니 다.
이 를 구성 요 소 를 업데이트 할 때 DOM 을 조작 할 수 있 는 기회 로 합 니 다.현재 아 이 템 을 이전 아 이 템 과 비교 하면(예 를 들 어 아 이 템 이 변경 되 지 않 으 면 네트워크 요청 이 필요 하지 않 을 수 있 습 니 다)이것 도 네트워크 요청 을 하 는 좋 은 곳 입 니 다.

componentDidUpdate(prevProps) {
 // Typical usage (don't forget to compare props):
 if (this.props.userID !== prevProps.userID) {
  this.fetchData(this.props.userID);
 }
}

componentDidUpdate()단,하나의 조건 에서 위의 예 와 같이 감 싸 져 야 합 니 다.그렇지 않 으 면 무한 순환 을 초래 할 수 있 습 니 다.사용자 가 보이 지 않 지만 구성 요소 의 성능 에 영향 을 줄 수 있 습 니 다.
componentDidUpdate():shouldComponentUpdate()가 false 로 돌아 가면 호출 되 지 않 습 니 다.
이 방법 들 은 남 겨 진 것 으로 여 겨 집 니 다.새 코드 에서 피해 야 합 니 다.
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()
마 운 트 해제
DOM 에서 구성 요 소 를 삭제 할 때 이 방법 을 사용 합 니 다:
componentWillUnmount()
componentWillUnmount()는 구성 요 소 를 마 운 트 해제 하고 소각 하기 전에 즉시 호출 합 니 다.이 방법 에 서 는 타이머 가 잘못 되 었 거나 네트워크 요청 을 취소 하거나 만 든 구독 componentDidMount()를 삭제 하 는 등 필요 한 청 소 를 수행 합 니 다.
setState()를 호출 하지 마 십시오.componentWillUnmount()는 구성 요소 가 영원히 다시 나타 나 지 않 기 때 문 입 니 다.구성 요소 인 스 턴 스 를 마 운 트 해제 하면 다시 설치 하지 않 습 니 다.
오류 처리
렌 더 링 기간 에 라 이 프 사이클 방법 이나 모든 하위 구성 요소 의 구조 함수 에서 오류 가 발생 했 을 때 이 방법 을 호출 합 니 다.
static getDerivedStateFromError()
static getDerivedStateFromError(error)
후대 구성 요소 에서 오 류 를 던 진 후 이 생명 주 기 를 호출 합 니 다.매개 변수 로 던 진 오 류 를 받 아들 이 고 상 태 를 업데이트 하기 위해 값 을 되 돌려 야 합 니 다.
componentDidCatch()
componentDidCatch(error, info)
후대 구성 요소 에서 오 류 를 던 진 후 이 생명 주 기 를 호출 합 니 다.두 개의 인 자 를 받 습 니 다:
error-던 진 오류.
info-componentStack 은 키 를 포함 하 는 대상 으로 어떤 구성 요소 가 오 류 를 일 으 키 는 지 에 대한 정 보 를 포함 합 니 다.
오류 가 발생 하면 componentDidCatch()호출 을 통 해 UI setState 를 되 돌 릴 수 있 지만,향후 버 전에 서 는 추천 하지 않 습 니 다.렌 더 링 대신 static getDerived StateFromError()를 사용 하여 리 턴 을 처리 합 니 다.
componentDidCatch()는'제출'단계 에서 호출 되 기 때문에 부작용 을 허용 합 니 다.그것 은 오류 와 같은 일 을 기록 하 는 데 사용 해 야 한다.

class ErrorBoundary extends React.Component {
 constructor(props) {
  super(props);
  this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
  // Update state so the next render will show the fallback UI.
  return { hasError: true };
 }

 componentDidCatch(error, info) {
  // Example "componentStack":
  //  in ComponentThatThrows (created by App)
  //  in ErrorBoundary (created by App)
  //  in div (created by App)
  //  in App
  logComponentStackToMyService(info.componentStack);
 }

 render() {
  if (this.state.hasError) {
   // You can render any custom fallback UI
   return <h1>Something went wrong.</h1>;
  }
  return this.props.children; 
 }
}

본 고 에서 말 한 것 이 여러분 의 react 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.