useEffect代替經常使用生命週期函數(三)

在用Class製做組件時,常常會用生命週期函數,來處理一些額外的事情(反作用:和函數業務主邏輯關聯不大,特定時間或事件中執行的動做,好比Ajax請求後端數據,添加登陸監聽和取消登陸,手動修改DOM等等)。在React Hooks中也須要這樣相似的生命週期函數,好比在每次狀態(State)更新時執行,它爲咱們準備了useEffect。從這節課開始來認識一下這個useEffect函數。它就像一匹野馬,當你沒有馴服它時,感受它很難相處甚至沒法掌握;但你馴服它後,你會發現它溫順可愛,讓你愛不釋手。javascript

Class的方式爲計數器增長生命週期函數

爲了讓你更好的理解useEffect的使用,先用原始的方式把計數器的Demo增長兩個生命週期函數componentDidMountcomponentDidUpdate。分別在組件第一次渲染後在瀏覽器控制檯打印出計數器結果和在每次計數器狀態發生變化後打印出結果。代碼以下:html

import React, { Component } from 'react';

class Example3 extends Component {
    constructor(props) {
        super(props);
        this.state = { count:0 }
    }
    
    
    componentDidMount(){
        console.log(`ComponentDidMount=>You clicked ${this.state.count} times`)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate=>You clicked ${this.state.count} times`)
    }

    render() { 
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.addCount.bind(this)}>Chlick me</button>
            </div>
        );
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
}
 
export default Example3;

這就是在不使用Hooks狀況下的寫法,那如何用Hooks來代替這段代碼,併產生同樣的效果那。java

useEffect函數來代替生命週期函數

在使用React Hooks的狀況下,咱們可使用下面的代碼來完成上邊代碼的生命週期效果,代碼以下(修改了之前的diamond): 記得要先引入useEffect後,才能夠正常使用。react

import React, { useState , useEffect } from 'react';
function Example(){
    const [ count , setCount ] = useState(0);
    //---關鍵代碼---------start-------
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    })
    //---關鍵代碼---------end-------

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}
export default Example;

寫完後,能夠到瀏覽器中進行預覽一下,能夠看出跟class形式的生命週期函數是徹底同樣的,這表明第一次組件渲染和每次組件更新都會執行這個函數。 那這段代碼邏輯是什麼?咱們梳理一下:首先,咱們生命了一個狀態變量count,將它的初始值設爲0,而後咱們告訴react,咱們的這個組件有一個反作用。給useEffecthook傳了一個匿名函數,這個匿名函數就是咱們的反作用。在這裏咱們打印了一句話,固然你也能夠手動的去修改一個DOM元素。當React要渲染組件時,它會記住用到的反作用,而後執行一次。等Reat更新了State狀態時,它再一詞執行定義的反作用函數。後端

useEffect兩個注意點

  1. React首次渲染和以後的每次渲染都會調用一遍useEffect函數,而以前咱們要用兩個生命週期函數分別表示首次渲染(componentDidMonut)和更新致使的從新渲染(componentDidUpdate)。瀏覽器

  2. useEffect中定義的函數的執行不會阻礙瀏覽器更新視圖,也就是說這些函數時異步執行的,而componentDidMonutcomponentDidUpdate中的代碼都是同步執行的。我的認爲這個有好處也有壞處吧,好比咱們要根據頁面的大小,而後繪製當前彈出窗口的大小,若是時異步的就很差操做了。異步

轉自:https://jspang.com/posts/2019/08/12/react-hooks.htmljsp

相關文章
相關標籤/搜索