为什么每次渲染都会调用 `useEffect` 的清理功能？

Question

我一直在学习 React，我读到从 useEffect 返回的函数是为了进行清理，React 在组件卸载时执行清理。

所以我对其进行了一些试验，但在以下示例中发现，每次重新渲染组件时都会调用该函数，而不是仅在从 DOM 卸载时调用该函数，即每次组件时调用 console.log("unmount");重新渲染。

这是为什么呢？

function Something({ setShow }) {
  const [array, setArray] = useState([]);
  const myRef = useRef(null);

  useEffect(() => {
    const id = setInterval(() => {
      setArray(array.concat("hello"));
    }, 3000);
    myRef.current = id;
    return () => {
      console.log("unmount");
      clearInterval(myRef.current);
    };
  }, [array]);

  const unmount = () => {
    setShow(false);
  };

  return (
    <div>
      {array.map((item, index) => {
        return (
          <p key={index}>
            {Array(index + 1)
              .fill(item)
              .join("")}
          </p>
        );
      })}
      <button onClick={() => unmount()}>close</button>
    </div>
  );
}

function App() {
  const [show, setShow] = useState(true);

  return show ? <Something setShow={setShow} /> : null;
}

现场示例：https://codesandbox.io/s/vigilant-leavitt-z1jd2

Answer 1

查看代码我可以猜到是因为第二个参数[array]。您正在更新它，因此它将调用重新渲染。尝试设置一个空数组。

每次状态更新都会调用重新渲染和卸载，并且该数组正在改变。

Answer 2

React 文档对此有一个 explanation section。

简而言之，原因是这样的设计可以防止过时数据和更新错误。

React 中的 useEffect 钩子旨在处理初始渲染和任何后续渲染 (here's more about it)。

---

效果是通过它们的依赖关系来控制的，而不是通过使用它们的组件的生命周期来控制的。

任何时候效果的依赖改变，useEffect都会清理之前的效果并运行新的效果。

这样的设计更容易预测 - each render has its own independent (pure) behavioral effect。这可以确保 UI 始终显示正确的数据（因为 React 心智模型中的 UI 是特定渲染状态的屏幕截图）。

我们控制效果的方式是通过它们的依赖关系。

为了防止每次渲染都运行清理，我们只需要不更改效果的依赖关系。

在你的具体情况下，清理正在进行是因为array 正在改变，即Object.is(oldArray, newArray) === false

useEffect(() => {
  // ...
}, [array]);
//  ^^^^^ you're changing the dependency of the effect

您使用以下行导致了此更改：

useEffect(() => {
  const id = setInterval(() => {
    setArray(array.concat("hello")); // <-- changing the array changes the effect dep
  }, 3000);
  myRef.current = id;

  return () => {
    clearInterval(myRef.current);
  };
}, [array]); // <-- the array is the effect dep

Answer 3

这似乎是意料之中的。根据此处的文档，useEffect 在首次渲染、每次更新和卸载后被调用。

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

提示

如果你熟悉 React 类生命周期方法，你可以想 useEffect Hook 作为 componentDidMount、componentDidUpdate 和之前的 componentWillUnmount 组合。

Answer 4

React 在组件卸载时执行清理。

我不确定你在哪里读到这个，但这个陈述是不正确的。 React performs the cleanup when the dependencies to that hook changes and the effect hook needs to run again with new values。此行为是有意保持视图对更改数据的反应性。离开官方的例子，假设一个应用程序从朋友的个人资料中订阅状态更新。作为你的好朋友，你决定取消他们的朋友并与其他人成为朋友。现在该应用程序需要取消订阅以前朋友的状态更新并收听新朋友的更新。这很自然，而且很容易通过useEffect 的工作方式实现。

 useEffect(() => { 
    chatAPI.subscribe(props.friend.id);

    return () => chatAPI.unsubscribe(props.friend.id);
  }, [ props.friend.id ])

通过在依赖列表中包含好友 ID，我们可以表明只有好友 ID 发生变化时才需要运行该钩子。

在您的示例中，您在依赖项列表中指定了array，并且您正在以设定的时间间隔更改数组。每次更改数组时，钩子都会重新运行。

您可以通过从依赖列表中删除数组并使用setState 挂钩的回调版本来实现正确的功能。回调版本总是对上一个版本的状态进行操作，所以不需要每次数组变化都刷新钩子。

  useEffect(() => {
    const id = setInterval(() => setArray(array => [ ...array, "hello" ]), 3000);

    return () => {
      console.log("unmount");
      clearInterval(id);
    };
  }, []);

一些额外的反馈是直接在clearInterval 中使用 id，因为当您创建清理函数时该值被关闭（捕获）。无需将其保存到参考文献中。

Answer 5

正如其他人所说，useEffect 取决于 useEffect 的第二个参数中指定的“数组”的变化。因此，通过将其设置为空数组，这将有助于在组件安装时触发一次 useEffect。

这里的诀窍是改变 Array 的先前状态。

setArray((arr) => arr.concat("hello"));

见下文：

  useEffect(() => {
     const id = setInterval(() => {
         setArray((arr) => arr.concat("hello"));
     }, 3000);
     myRef.current = id;
     return () => {
        console.log("unmount");
        clearInterval(myRef.current);
     };
  }, []);

我 fork 你的 CodeSandbox 用于演示： https://codesandbox.io/s/heuristic-maxwell-gcuf7?file=/src/index.js