React如何使用useEffect解決setState副作用

本篇內(nèi)容主要講解“React如何使用useEffect解決setState副作用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“React如何使用useEffect解決setState副作用”吧!

fetch()方法訪問(wèn)API

我們會(huì)用到一個(gè)很簡(jiǎn)單的資源API，https://swapi.dev/api/people/1，這是一個(gè)會(huì)返回星球大戰(zhàn)里的人物信息的API。

所以我們要做的事：1、讀取API中提供的數(shù)據(jù)； 2、將獲得的數(shù)據(jù)寫(xiě)入state。

首先我們來(lái)做第一步，這里介紹一下fetch()

fetch() 必須接受一個(gè)參數(shù)——資源的路徑。無(wú)論請(qǐng)求成功與否，它都返回一個(gè) Promise 對(duì)象，resolve 對(duì)應(yīng)請(qǐng)求的Response。

一旦 Response被返回，就可以使用一些方法來(lái)定義內(nèi)容的形式

所以我們可以使用以下代碼完成資源API的讀取，并且渲染到頁(yè)面上

import React from "react"
export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    fetch("https://swapi.dev/api/people/1")
        .then(res => res.json())
        .then(data => setStarWarsData(data))
    return (
        <div>
            <pre>{JSON.stringify(starWarsData, null, 2)}</pre>
        </div>
    )
}

可以看到我們似乎確實(shí)輕松地獲得了資源接口所提供給我們的數(shù)據(jù)

然而當(dāng)我們加上控制臺(tái)的輸出后，事情就變得不一樣了

setState的副作用

在這個(gè)程序中，我們可以加上一句console.log在控制臺(tái)輸出后天的運(yùn)行情況，如下

import React from "react"
export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    console.log("component rendered")
    fetch("https://swapi.dev/api/people/1")
        .then(res => res.json())
        .then(data => setStarWarsData(data))
    return (
        <div>
            <pre>{JSON.stringify(starWarsData, null, 2)}</pre>
        </div>
    )
}

這時(shí)再運(yùn)行就能清楚地看到在控制臺(tái)處顯示了這個(gè)組件在一直不斷地生成，重新地render

我們可以簡(jiǎn)單地分析一下原因，

• 組件每次render都會(huì)觸發(fā)一次fetch，

• 然后fetch獲取的數(shù)據(jù)傳入setState又會(huì)重新使得組件被render一遍，

而這就形成了一個(gè)死循環(huán)，致使組件不斷地生成。

使用useEffect解決這個(gè)問(wèn)題

在useEffect()出現(xiàn)之前，react并沒(méi)有setState后停止render的方法，這就使得setState的使用需要非常謹(jǐn)慎，不過(guò)如今提供了useEffet()來(lái)解決這個(gè)問(wèn)題

useEffect接受兩個(gè)參數(shù)，其中第二個(gè)參數(shù)是可選的

useEffect(<function>, <dependency array>)

所以讓我們先來(lái)嘗試一下不使用第二個(gè)參數(shù)會(huì)得到什么結(jié)果

import React from "react"
export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    console.log("component rendered")
    React.useEffect(function(){
        fetch("https://swapi.dev/api/people/1")
            .then(res => res.json())
            .then(data => setStarWarsData(data))
    })
    return (
        <div>
            <pre>{JSON.stringify(starWarsData, null, 2)}</pre>
        </div>
    )
}

可以看到在上面的代碼里我們已經(jīng)按照語(yǔ)法要求使用了useEffect()，然而結(jié)果卻不如我們所設(shè)想的只打印一條語(yǔ)句，依舊是一個(gè)死循環(huán)

原因在于只使用一個(gè)參數(shù)的useEffect()的效果是在組件被掛載和被更新兩種情況下執(zhí)行參數(shù)的函數(shù)，所以并不能解決更新?tīng)顟B(tài)不執(zhí)行的效果

那么就要用到第二個(gè)參數(shù)了，第二個(gè)參數(shù)叫做dependency array，只有在這個(gè)數(shù)組里的元素更新了，才會(huì)觸發(fā)這個(gè)useEffect

所以這里我們可以將第二個(gè)參數(shù)設(shè)置為一個(gè)空數(shù)組，這樣只有在組件剛剛被掛載的時(shí)候才會(huì)執(zhí)行useEffect，很好的解決了我們只需要讀取一遍API的任務(wù)要求

import React from "react"
export default function App() {
    const [starWarsData, setStarWarsData] = React.useState({})
    console.log("component rendered")
    React.useEffect(function(){
        fetch("https://swapi.dev/api/people/1")
            .then(res => res.json())
            .then(data => setStarWarsData(data))
    }, [])
    return (
        <div>
            <pre>{JSON.stringify(starWarsData, null, 2)}</pre>
        </div>
    )
}

使用useEffect操控函數(shù)運(yùn)行

由dependency array我們也可以得出另一種用法，可以看以下代碼

import React from "react"
export default function App() {
    const [count, setCount] = React.useState(0)
    console.log("Component rendered")
    React.useEffect(() => {
        console.log("Effect function ran")
    }, [count])
    return (
        <div>
            <h3>The count is {count}</h3>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>Add</button>
        </div>
    )
}

我們?cè)诘诙€(gè)參數(shù)處填入了會(huì)隨著我們點(diǎn)擊而變化的count，所以在我們每次點(diǎn)擊使得count增加以后，count state發(fā)生變化，執(zhí)行useEffect第一個(gè)參數(shù)的函數(shù)

可以看到設(shè)置了count state，再在useEffect中設(shè)置count為dependency，這樣每次改變count的值就會(huì)再一次執(zhí)行useEffect中的函數(shù)。

到此，相信大家對(duì)“React如何使用useEffect解決setState副作用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！