댓글에 구성 요소 라이프 사이클 기능 반응

1, 수명주기의 개념

1.1의 개념

생성하는 구성 요소, 업데이트, 구성 요소 속성에서 구성 요소가 항상 특정 기간에 이러한 구성 요소를 수행 할 수있는 다양한 기능과 함께, 그 과정에서 파괴, 함수 집합 구성 요소의 수명주기의 함수로 언급 수행 트리거.

세 단계 1.2, 구성 요소 수명주기

로드 단계 (설치) : 구성 요소 초기화를 수행, 주목할만한 특징이있다 : 수명주기 함수를 만듭니다 조립 일생에 한 번만 실행됩니다;
스테이지 업데이트 (갱신)는 : 0 회 이상 트리거링 선택적 조립 상태 소품의 변화에 따른 속성을 수행하고 상태 변화;
하역 상 (마운트 해제) 요소 개체 파괴 수명 번만 실행 때에 실행;

2, 기존의 라이프 사이클

2.1, 지지대 (부하 단계 : 후크 기능에 관한 6)

건설자()

로드되면 호출하면 초기화 된 상태 일 수있다

getDefaultProps ()

설정 기본 소품도 기본 속성을 사용하면 구성 요소를 dufaultProps.

getInitialState ()

초기화 상태는 this.state 생성자 직접 정의 될 수있다

componentWillMount ()

구성 요소가로드 될 때 구성 요소 업데이트가 호출되지 않습니다 이후에만 호출, 전체 라이프 사이클은 다음 상태를 수정할 수 있습니다, 한 번만 호출

세우다()

가상 DOM을 만드는 데 가장 중요한 단계 반응, DIFF 알고리즘 업데이트 DOM 트리이 있었다

componentDidMount ()

구성 요소 호출을 렌더링 한 후, 한 번만 호출

2.2, 업데이트 (갱신 단계 5 후크 함수를 포함하는)

componentWillReceivePorps (nextProps)

구성 요소가로드 될 때 호출이 호출되지 않은 경우, 구성 요소는 새로운 소품을 수용

shouldComponentUpdate (nextProps, nextState)

구성 요소가 새로운 소품이나 상태, (차이 알고리즘 업데이트를 사용) 진정한 의지 업데이트 DOM을 반환 거짓 방지 업데이트 (렌더링 호출하지 않는다) 반환을받을 때 호출

componentWillUpdata (nextProps, nextState)

구성 요소는로드 될 때 업데이트 할 구성 요소에서 호출 할 때 다음 상태를 수정할 수 호출되지 않습니다

세우다()

가상 DOM을 만드는 데 가장 중요한 단계 반응, DIFF 알고리즘 업데이트 DOM 트리이 있었다

componentDidUpdate ()

구성 요소가 호출의 완료 후 구성 요소 업데이트를로드 할 때 호출되지 않습니다

2.3 마운트 해제 (언 로딩 단계 : 후크 기능에 관한)

componentWillUnmount ()

구성 요소 호출을 렌더링 한 후, 한 번만 호출

2.4 함수의 코드 샘플의 수명주기

import React, { Component } from 'react'

export default class OldReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    componentWillMount() { // 组件挂载前触发

    }
    render() {
        return (
            <h2>Old React.Component</h2>
        )
    }
    componentDidMount() { // 组件挂载后触发

    }
    componentWillReceivePorps(nextProps) { // 接收到新的props时触发

    }
    shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
        return true
    }
    componentWillUpdate(nextProps, nextState) { // 组件更新前触发

    }
    componentDidUpdate() { // 组件更新后触发

    }
    componentWillUnmount() { // 组件卸载时触发

    }
}

3, 새로운 라이프 사이클

3.1 실장 (부하 단계 4 후크 기능에 관한)

건설자()

로드되면 호출하면 초기화 된 상태 일 수있다

정적 getDerivedStateFromProps (소품 상태)

다시 쓰게 조립체 각각은 새로운 상태 취득이나 소품 후 (실제 하중 DOM에 앞서, 가상 DOM 후)를 포함 구성된 후, 조립마다 각 수신 소품 새로운 상태로 새로운 객체를 반환 한 후 또는 필요 널 지침은 국가를 업데이트, componentDidUpdate으로, 모든 사용 componentWillReceiveProps을 커버 할 수있다

세우다()

가상 DOM을 만드는 데 가장 중요한 단계 반응, DIFF 알고리즘 업데이트 DOM 트리이 있었다

componentDidMount ()

구성 요소 호출을 렌더링 한 후, 한 번만 호출

3.2, 업데이트 (갱신 단계 5 후크 함수를 포함하는)

정적 getDerivedStateFromProps (소품 상태)

shouldComponentUpdate (nextProps, nextState)

세우다()

가상 DOM을 만드는 데 가장 중요한 단계 반응, DIFF 알고리즘 업데이트 DOM 트리이 있었다

getSnapshotBeforeUpdate (prevProps, prevState)

트리거 시간 : 시간 업데이트는 구성 요소 렌더링 DOM 전에, 렌더링 후 발생했습니다 componentDidUpdate 세 번째 매개 변수와 같은 값을 반환; componentDidUpdate으로, 모든 사용 componentWillUpdate을 커버 할 수있다

componentDidUpdate ()

구성 요소가 호출의 완료 후 구성 요소 업데이트를로드 할 때 호출되지 않습니다

3.3 마운트 해제 (언 로딩 단계 : 후크 기능에 관한)

componentWillUnmount ()

구성 요소 호출을 렌더링 한 후, 한 번만 호출

3.4, 오류 처리 (오류 처리)

componentDidCatch (오류, 정보)

트리거 중 하나에서 자바 스크립트 오류

3.5 새로운주기 함수 코드 샘플

import React, { Component } from 'react'

export default class NewReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
        return state
    }
    componentDidCatch(error, info) { // 获取到javascript错误

    }
    render() {
        return (
            <h2>New React.Component</h2>
        )
    }
    componentDidMount() { // 挂载后
        
    }   
    shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发

    }
    componentDidUpdate() { // 组件更新后触发

    }
    componentWillUnmount() { // 组件卸载时触发

    }
}

4 요약

오래된 수명주기

뉴 라이프 사이클

React16 새로운 라이프 사이클 포기 componentWillMount, componentWillReceivePorps, componentWillUpdate,
추가 getDerivedStateFromProps, getSnapshotBeforeUpdate대신 세 포기 후크 함수의 componentWillMount( componentWillReceivePorps, componentWillUpdate,);
React16이 세 후크 기능을 삭제하지,하지만 후크 기능을 추가 할 수 없습니다 ( getDerivedStateFromProps,) getSnapshotBeforeUpdate, 혼합 React17삭제됩니다 componentWillMount, componentWillReceivePorps, componentWillUpdate,
오류의 추가 처리 (componentDidCatch)