React生命周期

在上一个章节里面我们可以看到，当一个对象继承了React里面的Component对象以后就实现了一个组件的功能。React中的组件有以下几个生命周期，每一个生命周期都是一个HOOK方法（钩子函数），我们现在看一下这些生命周期

生命周期列表

  1. getDefaultProps

    通过这个方法来初始化一个组件的props属性，这个props来自父级件与其它组件传递过来的东西

  2. getInitalState

    初始化当前组件的状态，这个state状态会贯穿在我们整个项目当中

  3. componentWillMount

    组件在挂载之前会进行调用

  4. render

    是React里面使用最多最频繁最重要的一个方法，页面之所以可以渲染就是通过这个方法

  5. componentDidMount

    组件DOM插入完以后会调用的方法

  6. componentWillReceiveProps

    当组件去接收props属性值的时候会调用的方法

  7. shouldComponentUpdate

    我们在组件内部调用setState方法的时候，会触发这个生命周期的方法

  8. componentWillUpdate

    当组件更新之前的时候会调用的方法

  9. componentDidUpdate

    当组件更新之后调用的方法

  10. componentWillUnmount

    组件即将销毁的时候调用的方法

上面的10个方法是目前React的生命周期

将要废弃的声明周期

  • componentWillMount() -> 17版废弃
  • componentWillReceiveProps(nextProps) -> 17版废弃
  • componentWillUpdate（nextProps, nextState) -> 17版废弃

React生命周期图

image.png

通过上面的图我们大概对生命周期有一个了解，现在我们使用代码来做一次演示

Life.js

import React from "react";
import Child from "./Child";
export default class Life extends React.Component {
    constructor(props){
        super(props);
        this.state={
            count:0
        };
    }
    handleAdd=()=>{
        this.setState({
            count:this.state.count+1
        });
    }
    handleClick(){
        this.setState({
            count:this.state.count+1
        });
    }
    render() {
        return <div style={{padding:"30px"}}>
            <p>React生命周期介绍</p>
            <button onClick={this.handleAdd}>点击一下</button>
            <button onClick={this.handleClick.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>   
            <Child name={this.state.count}></Child>
        </div>
    }
}

Child.js

import React from "react";

export default class Child extends React.Component {
    constructor(props){
        super(props);
        this.state={
            count:0
        };
    }
    componentWillMount(){
        console.log("will mount");
    }
    componentDidMount(){
        console.log("did mount");
    }
    componentWillReceiveProps(newProps){
        console.log("will props"+newProps.name)
    }
    shouldComponentUpdate(){
        console.log("should update");
        return true;
        //这里要return true,默认是一个true,如果return false则代码不会向下继续走了
    }
    componentWillUpdate(){
        console.log("will update");
    }
    componentDidUpdate(){
        console.log("did update");
    }
    render() {
        return <div>
            <p>这是子组件，在这里展示子组件的生命周期</p>
            <p>{this.props.name}</p>
        </div>
    }
}

当我们打开网页以后，这个时候，会在控制台看到两句话，分别如下

image.png

will mount
did mount

这是组件在加载的时候的生命周期，现在我们在父级组件改变count的值，这个时候看到子组件是否触发了一些其它 的生命周期

image.png

这个时候，我们看到了已经触发了其它的生命周期了

通过上面的代码，我相信大家已经能够看到这这个生命周期的过程了

代码说明

在上面的代码里面，我们看到了React的基本数据渲染以后事件方法的绑定。

在React里面它使用的是JSX的语法，HTML代码与JS代码可以混合在一起写，只需要使用{}就可以区分了。在{}里面写的就是JS代码

  1. 注意style后面的写法

    大家看到这里面有两个花括号，其实它的完整写法应该是这样的

    原代码

    export default class Life extends Component{
    render(){
        return <div style={{padding:"30px"}}>
        </div>
    }
}

    完整代码

    export default class Life extends Component{
    render(){
        let s = {
            padding:"30px"
        };
        return <div style={s}>
        </div>
    }
}

    经过上面的代码对比，大家应该能够看得出来吧

  2. JSX当中的事件绑定

    <button onClick={this.handleAdd}>点击一下</button>
<button onClick={this.handleClick.bind(this)}>点击一下</button>

    各位同学可以看到，在这里，我们绑定事件方法的时候使用了两种写法。终其原因是因为在React的事件方法里在， 它的执行环境发生了变化，this的指针发生了改变，具体的演示我们可以在课堂上面看老师讲解

    handleAdd=()=>{
    this.setState({
        count:this.state.count+1
    });
}
handleClick(){
    this.setState({
        count:this.state.count+1
    });
}