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'));