我已经阅读了关于Hooks的React Docs，我很困惑。什么时候调用useEffect Hook清理函数？

Question

关于何时调用useEffect清理函数的react docs解释令人困惑且泛泛地说。他们甚至通过将类思维模型与钩子进行比较来使您更加困惑。基于类的组件的工作方式不同于带有钩子的基于函数的组件。React会记住您提供给useEffect的effect函数，并在将更改刷新到可以理解的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';
}

Answer 1

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>