详解React生命周期

image.png

第一个是组件初始化(initialization)阶段

也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。
而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

第二个是组件的挂载(Mounting)阶段

此阶段分为componentWillMount，render，componentDidMount三个时期。

componentWillMount:
在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。

render:
根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render），return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。

componentDidMount:
组件挂载到DOM后调用，且只会被调用一次

第三个是组件的更新(update)阶段

此阶段分为componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate

componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中，响应 Props 变化之后进行更新的唯一方式，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render

shouldComponentUpdate(nextProps, nextState)
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。

componentWillUpdate(nextProps, nextState)
此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。

render
render方法在上文讲过，这边只是重新调用。

componentDidUpdate(prevProps, prevState)
此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<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>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">


class Hello extends React.Component{

//第一个是组件初始化(initialization)阶段
constructor(props){
    //初始化状态
    super(props)

    //初始化状态
    this.state={
        name:'jack',
        age:31,
        npg:'我喜欢---哈哈'
    }
}
//第二个是组件的挂载(Mounting)阶段
componentWillMount(){
    console.log('组件加载前----------componentWillMount')
}

componentDidMount(){
    console.log('组件加载后--------componentDidMount')
}


    render(){
        console.log('组件的加载和数据的更新------render')
        return <div>
            <h1>hello ,{this.state.name}</h1>
            <p>年龄,{this.state.age}</p>
            <p>擅长,{this.state.npg}</p>
            <button onClick={this.updateUser}>更新事件</button>
        </div>
    }

    //第三个是组件的更新(update)阶段
    shouldComponentUpdate(){ //是否让组件更新 true更新 false 阻止更新
        console.log('数据是否更新-------shouldComponentUpdate')
        return true;
    }
    componentWillUpdate(){
        console.log('数据更新中------componentWillUpdate')
    }

    componentDidUpdate(){
        console.log('数据已经更新---------componentDidUpdate')
    }
    //事件
    updateUser=()=>{
        console.log('我执行了事件')
        this.setState({
            age:'18',
            name:'jaja'
        })
    }

}


ReactDOM.render(
    <Hello></Hello>,
    document.getElementById('example')
    )


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

image.png