useEffect中return函数的作用和执行时机解读
作者：淘淘是只狗
这篇文章主要介绍了useEffect中return函数的作用和执行时机,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
useEffect中return函数作用和执行时机
官网的代码
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可选的清除机制
每个 effect 都可以返回一个清除函数。
React会在组件卸载的时候执行清除操作
effect 在每次渲染的时候都会执行。
React 会在执行当前 effect 之前对上一个 effect 进行清除。
import { useEffect, useState } from 'react';
const Example = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("哈哈哈，useEffect 又执行了");
return () => {
console.log("看到我就知道执行了清除机制(～￣▽￣)～");
};
}, [count]);
return (
<div>
<p>那啥，你点了我 {count} 次 ⏲️⏲️⏲️⏲️</p>
{console.log("这是 dom 节点渲染了，小样╭(╯^╰)╮")}
<button
onClick={() => {
setCount(count + 1);
}}
>
你觉得你点击我之后会发生什么⛏️⛏️⛏️
</button>
</div>
);
};
function App() {
return (
<div className="App">
<Example />
</div>
);
}
export default App;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。