React 구성 요소의 수명주기 기능은 무엇입니까?

모든 구성요소에는 몇 가지 수명주기 기능이 있습니다.

컴포넌트 인스턴스가 생성되어 DOM에 삽입되면 다음 함수가 호출됩니다.

constructor
componentWillMount
render
componentDidMount

컴포넌트의 state 또는 props를 변경하면 업데이트가 발생하며, 컴포넌트가 실행될 때 다음 메서드가 호출됩니다. re-rendered

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

DOM에서 컴포넌트가 제거되면 다음 메소드가 호출됩니다

componentWillUnmount

一.render()

render 메소드가 필요하며, render의 반환 값은 다음과 같습니다. 다음 유형 중 하나:
( 1) React 요소: 사용자 정의 구성 요소 또는 기본 DOM 구성 요소
(2) 문자열 또는 숫자 : 는 DOM의 텍스트 노드
로 렌더링됩니다. (3) 포털: ReactDOM.createPortal
을 통해 생성됨(4)null:아무 것도 렌더링되지 않음
(5)부울:아무 것도 렌더링되지 않음
(6)여러 요소를 포함하는 배열

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

render 메서드는 간단해야 합니다. render에서 구성 요소의 상태를 수정할 수 없습니다. render가 호출될 때마다 새 결과가 반환됩니다. 그리고 render에서는 브라우저와 상호작용할 수 없습니다. 브라우저와 상호작용해야 하는 경우, componentDidMount 또는 기타 수명 주기 기능에서 실행하세요. 구성 요소가 로드되기 전에 구성 요소의 생성자가 호출됩니다. 명시적인 생성자가 정의되지 않은 경우 구성 요소를 인스턴스화할 때 기본 생성자가 호출됩니다. 만약 생성자가 React.Component의 하위 클래스에 명시적으로 정의되어 있으면 생성자에서 먼저 super를 호출해야 합니다. props).생성자에서 상태를 인스턴스화하는 것이 좋은 선택입니다. 다음은 코드 조각의 예입니다

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

props를 사용하여 react에서 상태를 초기화하는 것은 합법적이지만 문제가 있습니다. props가 업데이트되면 state 업데이트되지 않습니다. 해결 방법은 구성 요소의
comComponentWillReceiveProps(nextProps)에 있는 새로운 props로 상태를 업데이트하는 것입니다. 이렇게 하면 문제가 해결될 수 있지만 상태를 가장 가까운 공용 상위 구성 요소

three.comComponentWillMount()으로 승격하는 것은 권장되지 않습니다. 로드가 발생하면 comComponentWillMount가 즉시 호출되고 render를 호출하기 전에 componentWillMount가 호출되므로 comComponentWillMount에서 상태를 수정해도 구성 요소가 다시 렌더링되지 않습니다. 이 메서드는 서버 측 렌더링에만 호출됩니다. 이 메서드를 constructor로 바꾸는 것이 좋습니다.

IV.comComponentDidMount()

구성 요소가 로드되면 comComponentDidMount가 즉시 트리거됩니다. 이 함수에서 상태를 수정하면 구성 요소가 다시 렌더링됩니다. DOM은 구성 요소가 로드된 후에만 조작할 수 있습니다. 원격 데이터를 로드해야 하는 경우 여기에서 네트워크 요청을 보내는 것이 좋습니다.

5.comComponentWillReceiveProps(nextProps)

전달된 구성 요소가 comComponentWillReceiveProps 이전에 새로운 props를 허용하는 경우 의지가 발동됩니다. props 업데이트에 응답하기 위해 state를 업데이트해야 하는 경우 여기에서 setState 메서드를 통해 state를 업데이트할 수 있습니다. 구성요소가 처음으로 props를 수신하면 이 메소드가 호출되지 않습니다.
참고: props가 변경되지 않은 경우 이 메소드가 호출될 수 있으므로 현재 props를 다음 props와 비교해야 합니다. 이 방법은. ㅋㅋㅋ 렌더링, 이 메서드는 기본적으로 반환을 반환합니다. 사실입니다. 초기 렌더링 및 forceUpdate 사용 중에는 이 메서드가 호출되지 않습니다. shouldComponentUpdate가 false를 반환하면 후속 comComponentWillUpdate, render 및 comComponentDidMount가 호출되지 않으며 구성 요소와 해당 하위 구성 요소가 다시 렌더링되지 않습니다.

VII.comComponentWillUpdate(nextProps, nextState)새로운 props 또는 state가 수신되면 이 메서드는 다시 렌더링되기 직전에 호출됩니다. 이 메서드에서는 this.setState()를 사용할 수 없습니다. 8.comComponentDidUpdate(prevProps, prevState)이 메서드는 즉시 호출됩니다. 업데이트가 완료되었습니다. 첫 번째 렌더링 이 메서드는 호출되지 않습니다. 컴포넌트가 업데이트되면 여기에서

DOM을 작동할 수 있습니다. 현재

props가 이전 props와 다른 것을 발견하면 여기에서 네트워크 요청을 보내는 것이 좋습니다

9. componentWillUnmount() 이 메서드는 구성 요소가 삭제되기 직전에 호출되며 필요한 정리 작업을 이 메서드에서 수행할 수 있습니다

위 내용은 React 구성 요소의 수명주기 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!