React Hooks - 在useEffect中使用0和空数组作为第二个参数的区别

Question

我看到有人在useEffect的第二个参数中使用0代替一个空数组。

因此，不再是

useEffect(() => {
    console.log('Run once');
}, []);

它是

useEffect(() => {
    console.log('Run once');
}, 0);

它似乎有同样的效果，所以我想知道为什么他使用了那个?

根据您的评估方式，一个空数组被视为0。例如，[] == 0为真，但[] === 0为假。因此，在这种情况下，可能在底层没有严格的比较，使用0并不重要。

只是按照React文档的说法，我会使用一个空数组。

React文档:

如果你想运行一次效果并在卸载时清除它，你可以传递一个空数组([])作为第二个参数。这告诉React，您的effect不依赖于来自props或state的任何值，因此它永远不需要重新运行。这不会被作为特殊情况处理——它直接遵循依赖项数组的工作方式。

我想知道0是否是一个更简洁的二进制参数，可用于[]，或者使用0是一种不好的实践，还是它并不重要，[]只是React中的一种首选约定？

谢谢。

- StefanBob

Answer 1

这是useEffect函数的签名

export function useEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}

在这里，你可以看到它只接受数组、空或 void。因此，您的问题的正确答案是，如果想仅运行一次，请始终发送一个数组。

- ludwiguer

---

如果我没记错的话，这是用Flow编写的。 - Carmine Tambascia

Answer 2

不要在意控制台日志错误，它已经说明了一切：

react-dom.development.js:88 警告：useEffect收到一个不是数组的最终参数（而是收到了number）。当指定最终参数时，它必须是一个数组。

- StefanBob

Answer 3

我认为使用[]会更好，因为useEffect的第二个参数的目的。即使你只想确保effect只运行一次，你仍应将参数视为依赖项数组。

- Daniel Geffen

Answer 4

React Hook useEffect被传递了一个非数组字面量的依赖项列表。这意味着我们无法静态验证您是否已经传递了正确的依赖项react-hooks/exhaustive-deps。

当尝试使用0或null运行代码时，会收到此警告，因此我认为如果您想运行一次代码，发送一个数组会更好。

- Arun