时间戳

首页 > 解决方案 > 我已经阅读了 Hooks 上的 React Docs 并且我很困惑。什么时候调用 useEffect Hook 清理函数？

javascript - 我已经阅读了 Hooks 上的 React Docs 并且我很困惑。什么时候调用 useEffect Hook 清理函数？

问题描述

说实话，关于何时调用 useEffect 清理函数的反应文档解释令人困惑且通用。他们甚至通过将类心智模型与钩子进行比较来使您更加困惑。基于类的组件与带有钩子的基于函数的组件的工作方式不同。React 会记住你提供给 useEffect 的效果函数，并在刷新对 DOM 的更改后运行它，这是可以理解的。现在如何以及何时调用返回的函数（“清理函数”）？

下面的代码示例：

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';
}

标签： javascriptreactjsreact-hooks

解决方案

从作为第一个参数给出的函数返回的函数useEffect将在作为第二个参数给出的数组中的任何元素发生更改时调用，或者如果没有给出第二个参数，则在每次渲染时调用，或者当组件被卸载时。

例子

const { useEffect, useState } = React;

function MyComponent({ prop }) {
  useEffect(() => {
    console.log('Effect!');
    return () => console.log('Cleanup!')
  }, [prop])

  return (
    <div>{prop}</div>
  );
}

function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setValue(value => value + 1);
    }, 1000)
  }, [])

  return value < 3 ? <MyComponent prop={value} /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

推荐阅读