react生命周期

时间 2019-11-09

原文原文链接

参考资料：
React：组件的生命周期
这个文档利用es5的creatClass，有些陈旧。须要研究二者差异的，移步
 React 生命周期
这个过于粗暴，没有示例

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时，以下图：

实例化

getDefaultProps()
设置默认的props，也能够用dufaultProps设置组件的默认属性.
getInitialState()
在使用es6的class语法时是没有这个钩子函数的，能够直接在constructor中定义this.state。
每个React组件都有本身的 state，其与 props 的区别在于 state只存在组件的内部，props 在全部实例中共享。
componentWillMount()
组件初始化时只调用，之后组件更新不调用，整个生命周期只调用一次，此时能够修改state。
render()
react最重要的步骤，建立虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
只能经过 this.props 和 this.state 访问数据（不能修改），也就是不能调用this.setState()。
只能出现一个顶级组件，不能返回一组元素。例如：html
```
render(){
    //这样不行
    this.setState({
     newState:_newState
    });
    return (
    <div></div>
    //去掉下面一行
    <div></div>
    );
}
```
componentDidMount()
组件渲染以后调用，只调用一次。

demo

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Clock extends Component{

    constructor(props){
        super(props);
        this.state = {
            date:new Date()
        }
    }

    //渲染前render执行
    componentWillMount(){
        //this.timer///////////////////////////
        this.timer =setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },1000)
    }
    componentDidMount(){
        this.clock.focus();
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render(){
        return(
            <div>
                <h1>
                    <p ref={(clock)=>this.clock=clock}>now time:</p>
                    {this.state.date.toLocaleTimeString()}
                </h1>
            </div>
        )
    }
}
ReactDOM.render(<Clock />, document.getElementById('root'));

存在期，更新操做改变

componentWillReceiveProps(nextProps)
只有props改变时调用
shouldComponentUpdate(nextProps, nextState)
react性能优化很是重要的一环。组件接受新的state或者props时调用，咱们能够设置在此对比先后两个props和state是否相同，若是相同则返回false阻止更新，由于相同的属性状态必定会生成相同的dom树，这样就不须要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤为是在dom结构复杂的时候
componentWillUpdata(nextProps, nextState)
组件初始化时不调用，只有在组件将要更新时才调用，此时能够修改state。
render()
componentDidUpdate()
组件初始化时不调用，组件更新完成后调用，此时能够获取dom节点。

demo

import React from 'react';
import ReactDOM from 'react-dom';
class Content extends React.Component {
    constructor(){
        super();
        this.state = {
            test:0
        }
    }
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!')
    }
    componentWillReceiveProps(newProps) {
        console.log(newProps)
        console.log('Component WILL RECEIVE PROPS!')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log(newProps,newState)
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps,nextState)
        console.log('Component WILL UPDATE!');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps,prevState)
        console.log('Component DID UPDATE!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!')
    }
    _handleClick(){
        this.setState({
            test:this.state.test + 1
        })
    }
    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
                <label onClick={this._handleClick.bind(this)}>点我</label>
                <span>{this.state.test}</span>
            </div>
        );
    }
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: 0};
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
            <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
            </div>
    );
    }
}
ReactDOM.render(<Button />, document.getElementById('root'));

卸载

componentWillUnmount()组件将要卸载时调用，一些事件监听和定时器须要在此时清除，主要是优化性能，例子见Clock。