집 > 기사 > 웹 프론트엔드 > React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)

React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)

不言원래의: 2018-09-10 17:34:281312검색

이 글은 React 컴포넌트의 라이프사이클(코드 분석)에 대한 간략한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

전체 React 라이프사이클은 생성, 업데이트, 제거의 세 단계로 구성됩니다. 각 단계에는 해당 작업과 방법이 있습니다. 아래의 고전적인 그림을 보면 알 수 있습니다.

#🎜 🎜#

React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)

첫 번째 단계

이것은 5가지 메소드가 순차적으로 실행되는 단계입니다. 이 5개 렌더링 메서드를 제외하고 다른 네 가지 메서드는 전체 수명 주기 동안 한 번만 호출되며 반드시 한 번만 호출됩니다.

getDefaultProps()#🎜 🎜 #

comComponentWillMount()

이 메서드는 구성 요소가 생성되기 전에 실행됩니다. 구성 요소는 렌더링되며 상태를 수정하는 데 사용될 수 있습니다. React는 먼저 상위 컴포넌트의 함수를 호출한 다음 하위 컴포넌트의 함수를 호출합니다. #컴포넌트 렌더링 함수를 시작하고 루트 노드가 하나만 있는 가상 DOM을 반환합니다. 이 함수에서는 구성 요소의 상태를 동기식으로 수정할 수 없습니다.

comComponentDidMount()

렌더링 후 알림 구성 요소가 로드되었습니다. React는 먼저 하위 구성 요소의 이 함수를 호출한 다음 상위 구성 요소의 이 함수를 호출합니다. 이 기능부터 시작하여 구성 요소는 다른 프레임워크와 상호 작용할 수 있습니다. 예를 들어 타이머를 설정하거나 네트워크를 요청하는 것입니다.

2단계

이제 구성 요소는 안정적인 작동 단계에 진입했습니다. 이 단계에서 구성 요소는 사용자 상호 작용을 처리하거나 인터페이스를 업데이트하는 이벤트를 받을 수 있습니다. 다음 메서드는 전체 수명 주기 동안 여러 번 실행될 수도 있고 한 번도 실행되지 않을 수도 있습니다.

comComponentWillReceiveProps()

부모 컨테이너의 해당 매개변수가 변경되면 자식의 기능은 구성 요소가 호출됩니다. 새로운 props는 매개변수로 전달되며, 이전 props는 this.props를 기반으로 얻을 수 있습니다. 이 함수에서 상태에 대한 일부 처리를 수행할 수 있습니다. 그리고 이 함수에서 상태를 업데이트해도 2차 렌더링이 발생하지 않습니다. 새 상태와 새 소품이라는 두 가지 매개변수가 전달됩니다. 상태 및 소품의 변경 사항이 이 함수에 호출됩니다. 이 함수는 주로 전달된 nextProps 및 nextState를 판단합니다. true를 반환하면 다시 렌더링되고(기본값은 true), false를 반환하면 다시 렌더링되지 않습니다. 특정 조건에서는 전달된 props 및 상태에 따라 업데이트 여부를 선택할 수 있으므로 효율성이 향상됩니다.

comComponentWillUpdate()

comComponentWillMount 메소드와 유사하며 렌더링이 렌더링되기 전에 호출됩니다. 구성 요소는 새로운 소품이나 상태를 받습니다. 이 함수가 호출된 후 nextProps 및 nextState는 각각 this.props 및 this.state로 설정됩니다.

comComponentDidUpdate()

comComponentDidMount 메소드와 유사하며, 렌더링 렌더링 후에 호출되며 실제 DOM이 생성된 다음 함수를 호출합니다. 전달된 매개변수는 이전 props와 state입니다.

세 번째 단계

주로 기억을 정리하고 해제하는 죽음의 단계입니다. 이 단계에는 전체 수명 주기 동안 한 번만 호출되는 메서드가 하나만 있습니다.

comComponentWillUnmount()

인터페이스에서 구성 요소가 제거될 때 호출됩니다. 타이머 취소, 이벤트 모니터링 등과 같은 일부 관련 파괴 작업이 여기에서 수행됩니다.

렌더를 트리거하는 여러 가지 상황
여기에서는 shouldComponentUpdate가 수정되지 않았으며 항상 true를 반환하는 것만 고려합니다

#🎜 🎜 #첫 번째 렌더링, 즉 초기 렌더링

Call this.setState(setState가 호출될 때마다 트리거되지 않으며 입력 구성요소 등 반응이 최적화됩니다. of antd)#🎜🎜 #

상위 구성 요소가 업데이트됩니다. 일반적으로 수정된 하위 구성 요소의 소품입니다.

If 상위 구성 요소가 렌더링을 트리거하고 하위 구성 요소도 그에 따라 렌더링을 트리거합니다

Call this.forceUpdate()

#🎜 🎜#

간단한 예# 🎜🎜#

import React from 'react';
import ReactDOM from 'react-dom';
import style from './font.css';
import './index.less';

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      willRender: true,
      prop: 1
    };
  }

  render(){
    return (
      <div>
        <button>{this.setState({prop: 10})}}>changePropsFromParent</button>
        {
          this.state.willRender &&
          <child></child>
        }
        <button>{this.setState({willRender: false})}}>UnmountChild</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: 0
    };
  }

 getDefaultProps(){
   console.log('getDefaultProps');
 }

  getInitalState(){
    console.log('getInitalState');
  }

  componentWillMount(){
    console.log('componentWillMount');
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
  }

  shouldComponentUpdate(){
    console.log('shouldComponentUpdate');
    return true;
  }

  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('componentDidUpdate');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render')

    return (
      <div>
        <button>this.setState({curr:2})}>setState</button>
        <button>{this.forceUpdate();}}>forceUpdate</button>
      </div>
    );
  }
}

ReactDOM.render(
  <parent></parent>,
  document.getElementById('root')
);

React 컴포넌트의 라이프사이클에 대한 간략한 분석(코드 분석)

관련 기사