react生命周期

React生命周期

生命周期：就是指一个对象的生老病死。 React的生命周期指从组件被创建到销毁的过程。掌握了组件的生命周期，就可以在适当的时候去做一些事情。

React生命周期可以分成三个阶段：

1、实例化(挂载阶段)：对象创建到完全渲染

2、存在期(更新期)：组件状态的改变

3、销毁/清除期：组件使用完毕后，或者不需要存在与页面中，那么将组件移除，执行销毁。

3.1、实例化/挂载阶段

constructor()

componentWillMount()

render()

componentDidMount()

 export default class App3 extends Component {
        // 生命周期第一个阶段： 挂载/初始化阶段
        constructor(props){
            console.log("1.1 constructor: 构造初始化")
            // 调用父类构造方法
            super(props)
    
            // 初始化状态数据
            this.state = {
    
            }
            // 事件函数this的绑定
            this.handleClick = this.handleClick.bind(this)
    
        }
    
        UNSAFE_componentWillMount(){
            console.log("1.2 componentWillMount")
            //做一些准备性的工作，比如提示正在加载
        }
    
        componentDidMount() {
            console.log("1.4 componentDidMount")
            //异步加载数据
        }
        
    
        handleClick(){
            alert("点击了p标签")
        }
    
        render() {
            console.log("1.3 render")
            return (
                <div>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                </div>
            )
        }
    }

3.2、存在期/更新期

存在期:组件已经渲染好并且用户可以与它进行交互。通常是通过一次鼠标点击、手指点按者键盘事件来触发一个事件处理器。随着用户改变了组件或者整个应用的state，便会有新的state流入组件树，并且我们将会获得操控它的机会。

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

在上面的组建中继续书写生命周期函数：

render() {
            console.log("1.3/2.4 render")
            return (
                <div>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                    <p onClick={this.handleClick}>这是一个展示生命周期的组件{this.state.num}</p>
                </div>
            )
        }
    
    	handleClick(){
            this.setState({
                num:22
            })
        }
    	
        // 生命周期第二个阶段  存在期/更新期
        componentWillReceiveProps(){
            console.log("2.1 componentWillReceiveProps")
        }
        shouldComponentUpdate(nextProps, nextState) {
            console.log("2.2 shouldComponentUpdate 可以判断修改前后的值是不是一样，不一样才去执行render。减少不必要的render，优化更新性能")
            console.log("旧的值：", this.state.num)
            console.log("新的值：", nextState.num)
    
            // return true   则执行render
            // return false   则不执行render
            //这里返回值是布尔值，但不应该写死，
            //而是判断新旧两个值是不是不相等，不相等就要执行render(就要返回true)
            return this.state.num !== nextState.num
    
        }
        componentWillUpdate(nextProps, nextState) {
            console.log("2.3 componentWillUpdate 更新前的生命周期回调")
        }
        componentDidUpdate(prevProps, prevState) {
            console.log("2.5 componentDidUpdate 更新后的生命周期回调")
        }

以上执行的是组件内部state数据更新前后的生命周期函数，

其实，对于组件的props属性值发生改变的时候，同样需要更新视图，执行render

componentWillReceiveProps() 这个方法是将要接收新的props值的时候执行，而props属性值从父组件而来，所以需要定义父组件：

 class App3 extends Component {
        ...
        
    	//生命周期第二个阶段  存在期/更新期
        UNSAFE_componentWillReceiveProps(nextProps){
            console.log("2.1 componentWillReceiveProps 这个方法props属性值更新的时候才会执行，更新state数据则不会执行这个方法")
            
            console.log(nextProps)
        }
    	...
        shouldComponentUpdate(nextProps, nextState) {
            console.log("2.2 shouldComponentUpdate 可以判断修改前后的值是不是一样，不一样才去执行render。减少不必要的render，优化更新性能")
    
            // return true   则执行render
            // return false   则不执行render
            //这里返回值是布尔值，但不应该写死，
            //而是判断新旧两个值是不是不相等，不相等就要执行render(就要返回true)
            return (this.state.num !== nextState.num || this.props.fatherNum !== nextProps.fatherNum)  //不仅仅是state数据跟新时候需要执行render，props属性的值更新的时候也要执行render，所以要多加一个判断条件
    
        }
    }
    
    export default class Father extends Component{
        constructor(props){
            // 调用父类构造方法
            super(props)
    
            // 初始化状态数据
            this.state = {
                fatherNum:0
            }
    
        }
    
        componentDidMount() {
            setTimeout(() => {
                this.setState({
                    fatherNum:10
                })
            }, 2000);
        }
        
    
        render(){
    
            return(
                <App3 fatherNum={this.state.fatherNum}/>
            )
        }
    }

3.3、销毁期

componentWillUnmount() 销毁组件前做一些回收的操作

componentDidMount() {
            console.log("1.4 componentDidMount")
            console.log("------------------------------------------")
    
            //异步加载数据
            document.addEventListener("click", this.closeMenu);
        }
        closeMenu(){
            console.log("click事件 closeMenu")
        }
    
    	// 生命周期第三个阶段  卸载期/销毁期
        componentWillUnmount() {
            console.log("3.1 componentWillUnmount 做一些回收的操作")
            document.removeEventListener("click", this.closeMenu);
        }

index.js中3秒后重新渲染页面：

    setTimeout(() => {
        ReactDOM.render(
            <div>hello world</div>
            , document.getElementById('root'));
    }, 3000);

3.4、生命周期小结

React组件的生命周期

3大阶段10个方法

    	1、初始化期（执行1次）

    	2、存在期  （执行N次）

    	3、销毁期  （执行1次）

小结：

componentDidMount ：  发送ajax异步请求

shouldComponentUpdate ： 判断props或者state是否改变，目的：优化更新性能