React生命周期

Dongjie_Liu 發(fā)布于2019-08-20 18:09 / 1352人閱讀

摘要：前言組件的生命周期可以分為掛載，渲染和卸載這幾個階段。因此，可以把生命周期分成兩類當(dāng)組件在掛載或卸載時。因此，當(dāng)方法返回的時候，組件不再向下執(zhí)行生命周期方法。父節(jié)點改變當(dāng)父節(jié)點改變，傳入子組件的發(fā)生改變，組件會依次調(diào)用子組件會重新渲染。

前言

React組件的生命周期可以分為掛載，渲染和卸載這幾個階段。
當(dāng)渲染后的組件需要更新時，我們會重新去渲染組件，直至卸載。
因此，可以把React生命周期分成兩類：
1.當(dāng)組件在掛載或卸載時。
2.當(dāng)組件接收新的數(shù)據(jù)時，即組件更新時。

一.掛載或卸載過程

1.組件初始化

static defaultProps保證this.props有初始值
this.state初始值
componentWillMount會在render之前調(diào)用，componentDidMount會在render之后調(diào)用，分別代表了渲染前后的時刻，
都只執(zhí)行一次。
render之后，我們在componentDidMount中執(zhí)行setState,組件會再次render,不過在初始化過程就渲染了兩次組件
，這并不是一件好事，但實際情況是，有些場景不得不需要setState,比如計算組件的位置或?qū)捀叩?，就不得不讓組件
先渲染，更新必要的信息后，再次渲染。

2.組件的卸載：
componentWillMount,我們常常會執(zhí)行一些清理方法，如事件回收或是清除定時器。

    componentWillMount() {
        this.setState({
            a: this.state.a + 1    // 先執(zhí)行willMount，a + 1，再執(zhí)行render,componentDidMount
        });
        console.log("will" + this.state.a);
    }
    componentDidMount() {
        console.log("did" + this.state.a);
    }
    render() {
        console.log("render" + this.state.a);
        return (
            
                
                { this.state.a }
                { this.props.maxLoops }
                
            
        );
    }

二.數(shù)據(jù)更新過程

1.數(shù)據(jù)更新過程：
更新過程指的是父組件向下傳遞props或組件自身執(zhí)行setState方法時發(fā)生的一系列更新動作。
如果組件自身state更新了，那么會依次執(zhí)行shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate。
shouldComponentUpdate是一個特別的方法，它接受需要更新的props和state,讓開發(fā)者增加必要的條件判斷，
讓其在需要時更新，不需要時不更新。因此，當(dāng)方法返回false的時候，組件不再向下執(zhí)行生命周期方法。
2.父節(jié)點props改變
當(dāng)父節(jié)點this.state改變，傳入子組件的this.props發(fā)生改變，組件會依次調(diào)用componentWillReceiveProps,
shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.
子組件會重新渲染。
3.如果組件是由父組件更新props而更新的，那么在shouldComponentUpdate之前會執(zhí)行componentWillReceiveProps方法，此方法可以作為React在props傳入后，渲染之前setState機會，在此方法中setState是不會二次渲染的。

componentWillReceiveProps(nextProps) {
        console.log("willreceive");
        console.log(nextProps);
        if (nextProps.id === 4) {
            this.setState({
                bb: 1000
            })
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("should update");
        if (nextState.bb === 16) {
            return false;
        }
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("will update");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("did update");
    }