useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī)解讀
更新時(shí)間：2024年01月04日 09:01:33 作者：淘淘是只狗
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
useEffect中return函數(shù)作用和執(zhí)行時(shí)機(jī)
官網(wǎng)的代碼
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
這是effect可選的清除機(jī)制
每個(gè) effect 都可以返回一個(gè)清除函數(shù)。
React會(huì)在組件卸載的時(shí)候執(zhí)行清除操作
effect 在每次渲染的時(shí)候都會(huì)執(zhí)行。
React 會(huì)在執(zhí)行當(dāng)前 effect 之前對(duì)上一個(gè) effect 進(jìn)行清除。
import { useEffect, useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("哈哈哈，useEffect 又執(zhí)行了");
return () => {
console.log("看到我就知道執(zhí)行了清除機(jī)制(～￣▽￣)～");
};
}, [count]);
return (
<div>
<p>那啥，你點(diǎn)了我 {count} 次 ????????</p>
{console.log("這是 dom 節(jié)點(diǎn)渲染了，小樣╭(╯^╰)╮")}
<button
onClick={() => {
setCount(count + 1);
}}
>
你覺(jué)得你點(diǎn)擊我之后會(huì)發(fā)生什么??????
</button>
</div>
);
};
function App() {
return (
<div className="App">
<Example />
</div>
);
}
export default App;
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React是用于構(gòu)建用戶界面的JavaScript庫(kù)， 起源于Facebook的內(nèi)部項(xiàng)目，這篇文章主要介紹了react如何快速設(shè)置文件路徑別名,需要的朋友可以參考下2021-04-04
這篇文章主要介紹了詳解React之key的使用和實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了VSCode搭建React Native環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
React?組件權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了React?組件權(quán)限控制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了antd form表單如何處理自定義組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
React使用TypeScript的最佳實(shí)踐和技巧
在React項(xiàng)目中使用TypeScript可以顯著提高代碼的可維護(hù)性和可讀性,并提供強(qiáng)大的類型檢查功能,減少運(yùn)行時(shí)錯(cuò)誤,以下是一些優(yōu)雅地將TypeScript集成到React項(xiàng)目中的最佳實(shí)踐和技巧,需要的朋友可以參考下2024-06-06
詳解create-react-app 自定義 eslint 配置
這篇文章主要介紹了詳解create-react-app 自定義 eslint 配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
我們項(xiàng)目中通常會(huì)需要引入字體,所以下面這篇文章主要給大家介紹了關(guān)于如何在React項(xiàng)目中引入字體文件并使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了ahooks解決用戶多次提交的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12