React生命周期

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

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

前言

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

一.掛載或卸載過程

1.組件初始化

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

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

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

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");
    }