React入門0x008: 生命周期

loonggg 發(fā)布于2019-08-23 11:31 / 2999人閱讀

0x000 概述

上一章說(shuō)明了生命周期的概念，本質(zhì)上就是框架在操作組件的過(guò)程中暴露出來(lái)的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業(yè)務(wù)，以下講的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同

0x001 組件掛載

以下是組件掛載的過(guò)程中觸發(fā)的聲明周期：

class App extends React.Component {
    constructor(props) {
        super(props)
        console.log("constructor", props)

    }

    componentWillMount() {
        console.log("componentWillMount")
    }

    componentDidMount() {
        console.log("componentDidMount")
    }

    render() {
        console.log("render")
        return {Date()}
    }

    componentDidMount() {
        console.log("componentDidMount")
    }
}

0x002 組件更新

以下是組件更新的時(shí)候觸發(fā)的生命周期：

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            date: Date()
        }
        setTimeout(() => {
            this.setState({date: Date()})
        }, 3000)
    }

    componentWillReceiveProps() {
        console.log("componentWillReceiveProps")
    }

    shouldComponentUpdate() {
        console.log("shouldComponentUpdate")
        return true

    }

    render() {
        console.log("render")
        return {this.state.date}
    }

    componentWillUpdate() {
        console.log("componentWillUpdate")

    }

    componentDidUpdate() {
        console.log("componentDidUpdate")

    }

}

第一次的render是由組件掛載引起的，而其他的方法則是由setState引起的

0x003 組件卸載

以下是由組件卸載的時(shí)候觸發(fā)的生命周期：

class Content extends React.Component {
    render(){
        console.log("Content::render")
        return content
    }
    componentWillUnmount() {
        console.log("Content::componentWillUnmount")
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            show: true
        }
        setTimeout(() => {
            this.setState({show: false})
        }, 3000)
    }

    render() {
        console.log("App::render")

        return (
            this.state.show
                ? 
                : null
        )
    }



}

0x004 完整生命周期

掛載：
constructor
componentWillMount
render
componentDidMount
更新：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸載：
componentWillUnmount
錯(cuò)誤處理（這里不說(shuō)）：
componentDidCatch

0x005 聲明周期使用場(chǎng)景

constructor(props)：

該方法主要用來(lái)初始化state，或者初始化一些資源，可以訪問(wèn)prop，但是訪問(wèn)不了 setState，會(huì)報(bào)錯(cuò)：Warning: Can"t call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the App component.

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            show: true
        }
    }

    render() {
        return (
            this.state.show
                ? 
                : null
        )
    }

}

componentWillMount()

沒(méi)啥卵用，可以在這個(gè)方法中調(diào)用setState()，并且設(shè)置的state可以在本次渲染生效，推薦使用constructor

render（）

你懂的，每次更新?tīng)顟B(tài)都會(huì)觸發(fā)，但是不要在這里調(diào)用會(huì)觸發(fā)組件更新的函數(shù)，比如setState()，否則可能陷入無(wú)盡阿鼻地獄。

componentDidMount()

這個(gè)方法常用，觸發(fā)這個(gè)生命周期，意味著dom和子組件都掛載好了，refs也可以用了，一般在這兒做網(wǎng)絡(luò)請(qǐng)求。

componentWillReceiveProps(nextProps)

這個(gè)組件也常用，一般用于父組件狀態(tài)更新，導(dǎo)致傳遞給子組件的props更新，當(dāng)時(shí)子組件又不是直接綁定父組件的props的時(shí)候使用，比如

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: props.content
        }
    }

    render() {
        return this.state.content
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            content: "1"
        }
        setTimeout(() => {
            this.setState({
                content: 10
            })
        }, 1000)
    }

    render() {
        return (
            
        )
    }

}

我們接受父組件的state.content作為子組件的初始化state.content，但是1s 之后，父組件發(fā)生了變化，state.content從1變成了10，我們期望子組件也同時(shí)更新，可惜子組件的constructor只會(huì)執(zhí)行一次，為了解決這個(gè)問(wèn)題，我們可以添加這個(gè)生命周期：

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: props.content
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            content:nextProps.content
        })
    }

    render() {
        return this.state.content
    }
}

這樣就可已在父組件props更新的時(shí)候，觸發(fā)子組件的更新

shouldComponentUpdate(nextProps, nextState)

這個(gè)組件也很常用，用來(lái)判斷是否要進(jìn)行某次更新，如果返回true則執(zhí)行更新，如果返回false則不更新，常用與性能優(yōu)化

class A extends React.Component {
    render() {
        console.log("A::render")
        return "A"
    }
}

class B extends React.Component {
    render() {
        console.log("B::render")
        return "A"
    }
}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 1
        }
        setTimeout(() => {
            this.setState({
                num: 10,
                name: 1
            })
        })
    }

    render() {
        console.log("App::render")
        return 
                
                
            
                {this.state.num}
            
        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

我們?cè)?b>App組件中掛載了A、B組件，App綁定了state.num，A、B綁定了state.name，然后在1s 后觸發(fā)app組件的更新，此時(shí)查看瀏覽器，可以看到，APP、A、B都執(zhí)行了render，但其實(shí)A、B依賴的name并沒(méi)有發(fā)生改變。如果是小組件還好，但如果是大組件，那就糟糕了，所以需要避免這種無(wú)所謂的更新：

class A extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.name === this.props.name ? true : false
    }

    render() {
        console.log("A::render")
        return "A"
    }
}

class B extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.name === this.props.name ? false : true
    }

    render() {
        console.log("B::render")
        return "A"
    }
}

我在促發(fā)這個(gè)方法的時(shí)候，A組件返回 true，B 組件返回false，查看瀏覽器，可以發(fā)現(xiàn)，觸發(fā)該方法的時(shí)候 A渲染了，而B沒(méi)有渲染

componentWillUpdate(nextProps, nextState)

沒(méi)啥卵用，和componentDidUpdate組成一對(duì)兒，如果業(yè)務(wù)需要，就用

componentDidUpdate()

沒(méi)啥卵用，和componentWillUpdate組成一對(duì)兒，如果業(yè)務(wù)需要，就用

componentWillUnmount

用于清理資源或者事件

class Content extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 1
        }
        setInterval(() => {
            this.setState({
                num: ++this.state.num
            })
            console.log(this.state.num)
        }, 1000)
    }

    render() {
        return this.state.num
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            show: true
        }
        setTimeout(() => {
            this.setState({
                show: false
            })
        },2000)
    }

    render() {
        return this.state.show
            ? 
            : null
    }

}

ReactDom
    .render(
        ,
        document
            .getElementById(
                "app"
            )
    )

我們?cè)?b>App組件中掛載Content組件，而Content組件則使用定時(shí)器每秒更新一次，但是在2s 之后，我們?cè)?b>App組件中卸載這個(gè)組件，但是，查看瀏覽器可以發(fā)現(xiàn)，定時(shí)器依舊在工作，并且報(bào)錯(cuò)：

如果我們返回顯示隱藏組件，就會(huì)積累越來(lái)越多的定時(shí)器。然后就爆炸了。

```
class Content extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 1
        }
        this.interval=setInterval(() => {
            this.setState({
                num: ++this.state.num
            })
            console.log(this.state.num)
        }, 1000)
    }

    render() {
        return this.state.num
    }
    componentWillUnmount(){
        clearInterval(this.interval)
    }
}
```
這么解決

0x006 總結(jié)

在不同的生命周期做不同的事。

0x007 資源：

react

源碼