没有数组的使用效应总是迭代，为什么？

Question

问题：
为什么没有数组的代码总是迭代与仅执行一次的数组相比，与代码相比？

Stackblitz：

没有数组：
https://stackblitz.com/edit/eedit/edit/reaect-ts-ts-9w3cgd？ file = app.tsx

带有数组：
https://stackblitz.com/edit/edit/reactt-ts-ts-xrrvan？ file = app.tsx

谢谢！

---

没有

import axios from 'axios';
import * as React from 'react';
import { useEffect, useState } from 'react';
import './style.css';

export default function App() {
  const [data, setData] = useState();

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((result) => setData(result.data));

    //console.log(data);
    console.log('t');
  });

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

---

数组的数组

import axios from 'axios';
import * as React from 'react';
import { useEffect, useState } from 'react';
import './style.css';

export default function App() {
  const [data, setData] = useState();

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((result) => setData(result.data));

    console.log(data);
    //console.log("t");
  }, []);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

Answer 1

来自官方 react Hooks 文档文档：

如果您想运行效果并仅清理一次（在安装和卸载上），则可以将空数组（[]）作为第二个参数传递。这告诉React，您的效果不取决于道具或状态的任何值，因此它无需重新运行。这不是作为特殊情况来处理的 - 它直接遵循依赖性数组的工作原理。

基本上，使用带有空依赖关系数组的挂钩只能在组件安装时运行一次。

另外，如果我们不包括依赖项数组，则每次零件重新租赁时都会运行回调。
每当其父母组件的状态或状态发生变化时，就会发生。

话虽如此，最好避免使用使用 hook 而无需依赖性数组，因为我们通常希望在更改特定状态时以特定的方式使用它。
以这种方式使用它是有效的，但没有真正建议。