快捷導(dǎo)航

React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析

更新時(shí)間：2022年10月27日 14:11:53 作者：小馬_xiaoen

useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合

前言

React函數(shù)式編程沒有生命周期，因此需要借助useEffect來(lái)實(shí)現(xiàn)。

useEffect的作用

發(fā)ajax請(qǐng)求獲取數(shù)據(jù)
設(shè)置訂閱/獲取定時(shí)器
手動(dòng)更改真實(shí)DOM

useEffect的使用？

1.class組件

在class組件中可以使用生命周期函數(shù)，知道組件觸發(fā)的過(guò)程。

代碼如下（示例）：

import React, { Component } from 'react'
export default class App extends Component {
    constructor(p){
        super(p)
        this.state = {num: 0}
    }
    render() {
        return (
            <div>
                <h2>{this.state.num}</h2>
                <button onClick={this.addNum.bind(this)}>累加</button>
            </div>
        )
    }
    componentDidMount(){
        console.log('Mount')
    }
    componentDidUpdate(){
        console.log('Update')
    }
    componentWillUnmount(){
    	consoloe.log('Unmount')
    }
    addNum(){
        this.setState({
            num: this.state.num+1
        })
    }
}

生命周期（圖）

2.函數(shù)式組件

函數(shù)式組件中沒有自己的生命周期，需要使用useEffect模擬生命周期。

代碼如下（示例）：

import React, { useState, useEffect } from 'react'
function App1(){
    const [num, setNum] = useState(0);
    const [num1, setNum1] = useState(1)
    /*
    1.第二個(gè)參數(shù)為空的情況：在初次渲染執(zhí)行一次后，會(huì)監(jiān)聽所有數(shù)據(jù)的更新，數(shù)據(jù)更新則會(huì)觸發(fā)useEffect()。（componentDidMount、componentDidUpdate）
    2.第二個(gè)參數(shù)為[]的情況:回調(diào)函數(shù)只會(huì)在第一次render()后執(zhí)行。（componentDidMount）
    3.第二個(gè)參數(shù)為[監(jiān)聽的元素]:在初次渲染執(zhí)行一次后，只會(huì)監(jiān)聽相應(yīng)元素變化才會(huì)觸發(fā)回調(diào)函數(shù)。（componentDidMount、componentDidUpdate）
    4.useEffect體中使用了return為一個(gè)函數(shù)，會(huì)在組件卸載前執(zhí)（componentWillUnmount）
    */
    useEffect(()=>{
        console.log('useEffect')
    }, [num])
    return (
    <div>
      <h1>{num}</h1>
      <button onClick={()=>setNum(num+1)}>累加</button>
      <h1>{num1}</h1>
      <button onClick={()=>setNum1(num1+1)}>累加</button>
    </div>
    )
}
export default App1;

總結(jié)

語(yǔ)法和說(shuō)明

useEffect(()=>{
	// 在此可以執(zhí)行任何帶副作用操作
	return ()=> { // 在組件卸載前執(zhí)行
		// 在此走一些收尾工作，如清除定時(shí)器/取消訂閱等
	}
},[stateValue])// 如果指定的是[]，回調(diào)函數(shù)只會(huì)在第一次render()后執(zhí)行
//如果第二個(gè)參數(shù)不填，將會(huì)監(jiān)聽所有數(shù)據(jù)的更新

可以把useEffect Hook 看做如下三個(gè)函數(shù)的組合

componentDidMount()
componentDidUpdate()
componentWillUnmount()

到此這篇關(guān)于React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析的文章就介紹到這了,更多相關(guān)React useEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: