React 구성 요소의 수명주기 기능은 무엇입니까?-JS 튜토리얼-php.cn

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

一个新手

풀어 주다： 2017-09-29 09:26:28

원래의

1912명이 탐색했습니다.

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

컴포넌트 인스턴스가 생성되어 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로 바꾸는 것이 좋습니다.