一：组件的生命周期（旧）

1）当前组件的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <title>生命周期(旧版本)</title>
</head>
<body>
    
<div id="box"></div>

<script type="text/babel">

    class MyComponent extends React.Component{

        // 构造函数
        constructor(props) {
            super(props)
            this.state = {
                flag: true
            }
            console.log('MyComponent---constructor')
        }

         // 卸载组件按钮事件
         handleUnmount = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
            console.log('MyComponent---unmountComponentAtNode')
        }

        // 更新组件按钮事件
        handleUpdate = ()=> {
           let {flag} = this.state
           this.setState({
               flag: !flag
           })
        }

        // 组件强制更新
        handleForceUpdate = ()=> {
            this.forceUpdate()
        }

        // 组件即将挂载
        componentWillMount() {
            console.log('MyComponent---componentWillMount')
        }

        // 挂载组件完成
        componentDidMount() {
            console.log('MyComponent---componentDidMount')
        }

        // 组件是否允许更新，代码不写该函数时，默认为true
        shouldComponentUpdate() {
            console.log('MyComponent---shouldComponentUpdate')
            return false
        }

        // 组件即将更新
        componentWillUpdate() {
            console.log('MyComponent---componnentWillUpdate')
        }

        // 组件更新完成
        componentDidUpdate() {
            console.log('MyComponent---componentDidUpdate')
        }

        // render函数
        render() {
            console.log('MyComponent---render')
            const {flag} = this.state
            return (
                <div>
                    <h1>state布尔值：{flag? 'true': 'false'}</h1>
                    <button onClick={this.handleUnmount}>卸载组件</button> 
                    <button onClick={this.handleUpdate}>变换</button> 
                    <button onClick={this.handleForceUpdate}>强制更新</button> 
                </div>
            )
        }

        // 卸载组件前
        componentWillUnmount(){
            console.log('MyComponent---componentWillUnmount')
        }

       
    }
    let obj = {
        flag: true
    }
    ReactDOM.render(<MyComponent {...obj}/>,document.getElementById('box'))

</script>
</body>
</html>

（1）：当前组件挂在的情况

MyComponent---constructor ==》 MyComponent---componentWillMount ==》 MyComponent---render ==》 MyComponent---componentDidMount

（2）：当前组件更新的情况

MyComponent---shouldComponentUpdate ==》 MyComponent---componnentWillUpdate ==》 MyComponent---render ==》 MyComponent---componentDidUpdate

（3）：当前组件强制更新的情况

MyComponent---componnentWillUpdate ==》 MyComponent---render ==》 MyComponent---componentDidUpdate

（4）：当前组件卸载的情况

MyComponent---componentWillUnmount ==》 MyComponent---unmountComponentAtNode

2）考虑父子组件的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <title>父子组件--生命周期(旧版本).html</title>
</head>
<body>
    
<div id="box"></div>

<script type="text/babel">

    // 父组件
    class MyParentComponent extends React.Component{

        // 构造函数
        constructor(props) {
            super(props)
            this.state = {
                flag: true,
                sendMoney: 100,
            }
            console.log('MyParentComponent---constructor')
        }

         // 卸载组件按钮事件
         handleUnmount = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
            console.log('MyParentComponent---unmountComponentAtNode')
        }

        // 更新组件按钮事件
        handleUpdate = ()=> {
           let {flag,sendMoney} = this.state
           this.setState({
               flag: !flag,
               sendMoney: sendMoney + 100
           })
        }

        // 组件强制更新
        handleForceUpdate = ()=> {
            this.forceUpdate()
        }

        // 组件即将挂载
        componentWillMount() {
            console.log('MyParentComponent---componentWillMount')
        }

        // 挂载组件完成
        componentDidMount() {
            console.log('MyParentComponent---componentDidMount')
        }

        // 组件是否允许更新，代码不写该函数时，默认为true
        shouldComponentUpdate() {
            console.log('MyParentComponent---shouldComponentUpdate')
            return true
        }

        // 组件即将更新
        componentWillUpdate() {
            console.log('MyParentComponent---componnentWillUpdate')
        }

        // 组件更新完成
        componentDidUpdate() {
            console.log('MyParentComponent---componentDidUpdate')
        }

        // render函数
        render() {
            console.log('MyParentComponent---render')
            const {flag} = this.state
            return (
                <div>
                    <h1>state布尔值：{flag? 'true': 'false'}</h1>
                    <button onClick={this.handleUnmount}>卸载组件</button> 
                    <button onClick={this.handleUpdate}>给孩子发钱</button> 
                    <button onClick={this.handleForceUpdate}>强制更新</button>
                    <ChildComponent sendMoney={this.state.sendMoney}/>
                </div>
            )
        }

        // 卸载组件前
        componentWillUnmount(){
            console.log('MyParentComponent---componentWillUnmount')
        }
    }
    

    class ChildComponent extends React.Component{

        // 构造函数
        constructor(props) {
            super(props)
            this.state = {
                flag: true,
                sendMoney: 100,
            }
            console.log('ChildComponent---constructor')
        }

        // 卸载组件按钮事件
        handleUnmountChild = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
            console.log('ChildComponent---unmountComponentAtNode')
        }

        // 更新组件按钮事件
        handleUpdate = ()=> {
        let {flag,sendMoney} = this.state
        this.setState({
            flag: !flag,
        })
        }

        // 组件强制更新
        handleForceUpdate = ()=> {
            this.forceUpdate()
        }

        // 组件将要接收参数
        componentWillReceiveProps() {
            console.log('ChildComponent---componentWillReceiveProps')
        }

        // 组件即将挂载
        componentWillMount() {
            console.log('ChildComponent---componentWillMount')
        }

        // 挂载组件完成
        componentDidMount() {
            console.log('ChildComponent---componentDidMount')
        }

        // 组件是否允许更新，代码不写该函数时，默认为true
        shouldComponentUpdate() {
            console.log('ChildComponent---shouldComponentUpdate')
            return true
        }

        // 组件即将更新
        componentWillUpdate() {
            console.log('ChildComponent---componnentWillUpdate')
        }

        // 组件更新完成
        componentDidUpdate() {
            console.log('ChildComponent---componentDidUpdate')
        }

        // render函数
        render() {
            console.log('ChildComponent---render')
            const {flag} = this.state
            return (
                <div>
                    <h1>======我是子组件====</h1>
                    <p>老爸给的钱{this.props.sendMoney}</p>
                    <h1>state布尔值：{flag? 'true': 'false'}</h1>
                    <button onClick={this.handleUnmountChild}>卸载组件</button> 
                    <button onClick={this.handleUpdate}>子组件变换</button> 
                    <button onClick={this.handleForceUpdate}>强制更新</button> 
                </div>
            )
        }

        // 卸载组件前
        componentWillUnmount(){
            console.log('ChildComponent---componentWillUnmount')
        }
    }

    ReactDOM.render(<MyParentComponent />,document.getElementById('box'))

</script>
</body>
</html>

(1)组件挂载的情况

MyParentComponent---constructor ==》MyParentComponent---componentWillMount ==》 MyParentComponent---render ==》 ChildComponent---constructor ==》 ChildComponent---componentWillMount ==》 ChildComponent---render ==》 ChildComponent---componentDidMount ==》 MyParentComponent---componentDidMount

(2)父组件更新的情况

MyParentComponent---shouldComponentUpdate ==》 MyParentComponent---componnentWillUpdate ==》 MyParentComponent---render ==》 ChildComponent---componentWillReceiveProps ==》 ChildComponent---shouldComponentUpdate ==》 ChildComponent---componnentWillUpdate ==》 ChildComponent---render ==》 ChildComponent---componentDidUpdate ==》 MyParentComponent---componentDidUpdate

(3)父组件强制更新的情况

MyParentComponent---componnentWillUpdate ==》 MyParentComponent---render ==》 ChildComponent---componentWillReceiveProps ==》 ChildComponent---shouldComponentUpdate ==》 ChildComponent---componnentWillUpdate ==》 ChildComponent---render ==》 ChildComponent---componentDidUpdate ==》 MyParentComponent---componentDidUpdate

二：组件的生命周期（新）

(1) static getDerivedStateFromProps(props,state)

若state在任何时候都取决于props，可以使用这个钩子函数且必须返回状态对象(state)或者props、null

(2) getSnapshotBeforeUpdate()

顾名思义就是【在更新前获取快照】，必须返回快照值，或者null,如果返回快照值，那么就会传给componentDidUpdate(preProps,preState,snapshotValue)钩子函数,第三个参数就是返回的快照值。在此构造函数我们可以获取数据更新前的一些情况，