快捷導(dǎo)航

React中的useEffect四種用法分享

更新時(shí)間：2023年07月11日 11:18:16 作者：前端小張同學(xué)

這篇文章主要給大家分享React中的useEffect四種用法，useEffect中觸發(fā)更新，重復(fù)的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

什么是 useEffect ?

官方解釋： useEffect 是一個(gè) React Hook，它允許你將組件與外部系統(tǒng)同步。

什么意思？個(gè)人理解就是它能根據(jù)不同的依賴值或者返回值，在不同的時(shí)機(jī)進(jìn)行執(zhí)行。

我們先來說說第一種用法

1 ： useEffect 中觸發(fā)更新

示例1 ：當(dāng)我們?cè)诮M件創(chuàng)建的過程，自動(dòng)執(zhí)行某些操作的時(shí)候，那我們可以在函數(shù)式組件中這樣

錯(cuò)誤示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
})
const initData = () => {
    setCount(count + 1)
}
return ( <div> {count} </div> )
}

如果你這種用 useEffect 你會(huì)發(fā)現(xiàn) 什么問題？

當(dāng)我們組件渲染完成去執(zhí)行 useEffect 調(diào)用 initData 函數(shù) 函數(shù)通過 setCount 設(shè)置值觸發(fā)更新，一旦更新 useEffect 又會(huì)在渲染的最后執(zhí)行，這樣就照成了 死循環(huán)

所以你應(yīng)該這樣寫 ,傳入 useEffect 第二個(gè)參數(shù) 空數(shù)組，代表組件渲染過程中只執(zhí)行一次

正確示例

import { useEffect } from 'react'
function App () {
const [ count , setCount] = useState(0)
useEffect(()=> {
    initData()
}, [])
const initData = () => {
setCount(count + 1)
}
return ( <div> {count} </div> )
}

2 ：用法2 重復(fù)的 useEffect

示例2 ：當(dāng)我們?cè)诮M件渲染的過程中，如果你寫了多個(gè)useEffect 它會(huì)怎么做？

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('111');
  })
  useEffect(() => {
    console.log('222');
  })
  return (<div> {count} </div>)
}
export default Effect

想當(dāng)然，它不會(huì)覆蓋前面的 useEffect ，會(huì)根據(jù)你的編寫順序進(jìn)行收集，然后循環(huán)執(zhí)行(當(dāng)然這只是我的猜測(cè)，暫時(shí)還沒看react源碼)

3 ：依賴值觸發(fā)回調(diào)

當(dāng)你想去依賴某些變量的時(shí)候去觸發(fā)回調(diào)函數(shù)，你可以這樣。

import { useEffect, useState } from 'react';
function Effect() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('count發(fā)生了變化最新值為' + count);
  }, [count])
  return (<div>
    <div>
      {count}
    </div>
    <button onClick={() => setCount(count + 1)}>加1</button>
  </div>)
}
export default Effect

當(dāng)你的第二個(gè)參數(shù)是數(shù)組，并且是依賴項(xiàng)，組件初次渲染也會(huì)執(zhí)行，這是為什么呢？

解答：如果從 react useState Hook 來說，也就是 react 將你傳入的默認(rèn)值給你重新賦值了，所以發(fā)生了變化，因此 useEffect 發(fā)生了更新

4 ：useEffect 的返回值

當(dāng)useEffect 傳入的回調(diào)函數(shù)有返回值時(shí)并且為一個(gè) 函數(shù)的時(shí)候，它會(huì)怎么做？

import { useEffect, useState } from 'react';
const Room = () => {
  useEffect(() => {
    console.log("子組件渲染完成")
    return () => {
      console.log("子組件useeffect 回調(diào)函數(shù)執(zhí)行")
    }
  }, [])
  return (<div>
    這是我的房間 ， 大家一起來玩呀
  </div>)
}
function Effect() {
  const [show, setShow] = useState(true)
  return (<div>
    <div>
      {show && <Room></Room>}
    </div>
    <button onClick={() => setShow(!show)}>加1</button>
  </div>)
}
export default Effect