React生命周期-杨标的博客

React生命周期

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

生命周期列表

getDefaultProps

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

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

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

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

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

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

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

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

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

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

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

将要废弃的声明周期

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

React生命周期图

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

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>
    }
}

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

will mount
did mount

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

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

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

代码说明

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

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

注意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>
    }
}

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

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
    });
}
```

目录CONTENT

React生命周期