React的生命周期函数及使用场景

生命周期

生命周期函数指在某一时刻组件会自动执行(调用)的函数

从左到右依次：初始化过程、挂载过程、更新过程、卸载过程
- 初始化过程
  1. setup
  2. props
  3. state
- 挂载过程
  1. componentWillMount：组件即将被挂载到页面之时，会自动执行
  2. render：组件被挂载到页面之时，会自动执行
  3. componentDidMount：组件被挂载到页面之后，会自动执行
- 更新过程
  - props
    1. componentWillReceiveProps
      - 满足该函数执行的两个条件
        
        要从父组件接收参数
        
        只要父组件的render函数被重新执行了，子组件的该函数就会被执行
    2. shouldComponentUpdate：组件被更新之前，自动被执行（需要返回一个bool值，表示组件是否需要更新）
    3. componentWillUpdate：组件被更新之前，它会自动执行，但是它在 shouldComponentUpdate 之后被执行，如果 shouldComponentUpdate 返回 false 这个函数就不被执行了
    4. render
    5. componentDidUpdate：组件更新完成之后，它会被执行
  - state
    1. shouldComponentUpdate
    2. componentWillUpdate
    3. render
    4. componentDidUpdate
- 卸载过程
  1. componentWillUnmount

挂载过程代码示例

import React, { Component } from "react";
class TodoList extends Component {
    // 组件即将被挂载到页面之时，会自动执行
    componentWillMount () {
        console.log('挂载前执行了！')
    }
    // 组件被挂载到页面之后，会自动执行
    componentDidMount () {
        console.log('挂载完执行了！')
    }

    // 组件被挂载到页面之时，会自动执行
    render () {
        return (
            console.log('挂载上执行！')
        )
    }
}

export default TodoList

更新过程代码示例

父组件子组件

import React, { Component } from "react";
class TodoList extends Component {
    // 组件被更新之前，自动被执行：需要返回一个bool值，表示组件是否需要更新
    shouldComponentUpdate () {
        console.log('要更新了！')
        return true
    }

    // 组件被更新之前，它会自动执行，但是它在 shouldComponentUpdate 之后被执行，如果 shouldComponentUpdate 返回 false 这个函数就不被执行了
    componentWillUpdate () {
        console.log('componentWillUpdate')
    }

    // 组件更新完成之后，它会被执行
    componentDidUpdate () {
        console.log('更新成功后执行！')
    }

    // 组件被挂载到页面之时，会自动执行
    render () {
        return (
            console.log('挂载上执行！')
        )
    }
}

export default TodoList

import React, { Component } from "react";
import PropTypes from "prop-types"

class TodoItem extends Component {

    // 一个组件要从父组件接收参数
    // 只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
    componentWillReceiveProps () {
        console.log('child componentWillReceiveProps')
    }

    render() {}

}

export default TodoItem;

卸载过程代码示例

子组件

import React, { Component } from "react";
import PropTypes from "prop-types"

class TodoItem extends Component {
    ... ...
    // 当这个组件即将被从页面中剔除的时候，会被执行
    componentWillUnmount () {
        console.log('child componentWillUnmount')
    }
    render() {}

}

export default TodoItem;

使用场景

父组件props的变动，触发父组件render，父组件render触发导致子组件render也被触发，造成性能的损失。
- 解决方案在子组件使用生命周期函数 shouldComponentUpdate 在父组件未进行dom变更时，不对子组件做render执行
```
shouldComponentUpdate (nextProps, nextState) {
    if (nextProps.itemVal !== this.props.itemVal) {
        return true;
    } else {
        return false;
    }
}
```

在construct中就写入 bind 行为，保证程序中只执行一次

constructor(props) {
    // 当props发生改变，render就会被重新执行
    this.del = this.del.bind(this)
}
... ...
render() {
    return (
        <div
            onClick={this.del}
        >
        </div>
    )
}

ajax 行为
- componentDidMount
- construct (不建议)
- componentWillMount (不建议+)