React 中的生命周期函式

生命周期函式指的是組件在某一時刻會自動執行的函式

constructor可以看成一個類的普通生命周期函式，但不是react獨有的生命周期函式

render() 是資料發生變化時會自動執行的函式，因此屬于react的生命周期函式

mounting只在第一次渲染時會執行

import React,{Component} from 'react';

class Counter extends Component{

    constructor(props){
        super(props);
        console.log('constructor');
    }

    componentWillMount(){
        console.log('componentWillMount');
    }

    componentDidMount(){
        console.log('componentDidMount');
    }

    render(){
        console.log('render');
        return(
            <div>hello react</div>
        )
    }
}

export default Counter;

可以看到代碼有提示：componentWillMount has been renamed, and is not recommended for use.

這是因為React 16.9包含了一些新特性、bug修復以及新的棄用警告

unsafe 生命周期方法重命名為：

componentWillMount → UNSAFE_componentWillMount

componentWillReceiveProps → UNSAFE_componentWillReceiveProps

componentWillUpdate → UNSAFE_componentWillUpdate

在這種情況下，建議運行一個自動重命名它們的 codemod 腳本：

cd your_project
npx react-codemod rename-unsafe-lifecycles
（注意：這里使用的是 npx，不是 npm ，npx 是 Node 6+ 默認提供的實用程式，）

運行 codemod 將會替換舊的生命周期，如 componentWillMount 將會替換為 UNSAFE_componentWillMount :

新命名的生命周期（例如：UNSAFE_componentWillMount）在 React 16.9 和 React 17.x 繼續使用，但是，新的 UNSAFE_ 前綴將幫助具有問題的組件在代碼 review 和 debugging 期間脫穎而出，（如果你不喜歡，你可以引入 嚴格模式（Strict Mode）來進一步阻止開發人員使用它 ，）

當然按照上述操作完之后，我發現依然會報提示，于是目前能用的方法還是修改react版本

資料發生改變會觸發updation

import React,{Component} from 'react';

class Counter extends Component{

    constructor(props){
        super(props);
        this.updateNum=this.updateNum.bind(this);
        console.log('constructor');
        this.state={
            num:0
        }
    }

    updateNum(){
        this.setState({
            num:this.state.num+1
        })
    }

    componentWillMount(){
        console.log('componentWillMount');
    }

    componentDidMount(){
        console.log('componentDidMount');
    }

    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }

    componentWillUpdate(){
        console.log('componentWillUpdate');
    }

    componentDidUpdate(){
        console.log('componentDidUpdate');
    }

    render(){
        console.log('render');
        return(
            <div onClick={this.updateNum}>hello react</div>
        )
    }
}

export default Counter;

當shouldComponentUpdate回傳值設定為false時，不會再觸發updation

import React,{Component} from 'react';

class Counter extends Component{

    constructor(props){
        super(props);
        this.updateNum=this.updateNum.bind(this);
        console.log('constructor');
        this.state={
            num:0
        }
    }

    updateNum(){
        this.setState({
            num:this.state.num+1
        })
    }

    componentWillMount(){
        console.log('componentWillMount');
    }

    componentDidMount(){
        console.log('componentDidMount');
    }

    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return false;
    }

    componentWillUpdate(){
        console.log('componentWillUpdate');
    }

    componentDidUpdate(){
        console.log('componentDidUpdate');
    }

    render(){
        console.log('render');
        return(
            <div onClick={this.updateNum}>hello react</div>
        )
    }
}

export default Counter;

生命周期函式，也可以叫做鉤子函式

props相關生命周期函式是針對子組件的

新建number.js

import React,{Component} from 'react';

class Number extends Component{
    componentWillReceiveProps(){
        console.log('    child componentWillReceiveProps');
    }

    shouldComponentUpdate(){
        console.log('    child shouldComponentUpdate');
        return true;
    }

    componentWillUpdate(){
        console.log('    child componentWillUpdate');
    }

    componentDidUpdate(){
        console.log('    child componentDidUpdate');
    }

    render(){
        return(
            <div>{this.props.num}</div>
        )
    }
}

export default Number;

生命周期函式使用實體

給全域物件系結事件

import React,{Component} from 'react';

class Counter extends Component{

    clickFn(){
        console.log('window click');
    }

    componentDidMount(){
        window.addEventListener("click",this.clickFn);
    }

    componentWillUnmount(){
        window.removeEventListener("click",this.clickFn);
    }

    render(){
        console.log('render');
        return(
            <div>
                <div>hello react</div>
            </div>
        )
    }
}

export default Counter;

接下來演示ajax請求

需要先安裝axios

npm install axios --save

如果是只在開發環境運行，則使用--save-dev

然后引入axios

import axios from 'axios';

import React,{Component} from 'react';
import axios from 'axios';

class Counter extends Component{

    componentDidMount(){
        axios.get("http://www.dell-lee.com/react/api/demo.json")
        .then(res=>{
            console.log(res.data);
        })
    }

    render(){
        console.log('render');
        return(
            <div>
                <div>hello react</div>
            </div>
        )
    }
}

export default Counter;

標籤：JavaScript

上一篇：asap異步執行實作原理

下一篇：前端之jQuery