useEffect 中 return 函数的作用和执行时机

- 日理万妓 2022-08-28 09:48 226阅读 0赞

官网的代码

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 都可以返回一个清除函数。**

![在这里插入图片描述][35e1258d3b11498495f7702d7ec1b309.gif_pic_center]  
**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;

[35e1258d3b11498495f7702d7ec1b309.gif_pic_center]: /images/20220828/50ef1793b7594e44a5df39ff9564682a.png