React 中只运行一次的功能组件

Question

我试图在 React 中创建一个网格，当我的程序根据我是在编辑器中保存文件还是在实时服务器上刷新页面而给我不同的输出时，我感到非常困惑。

如果您将一个空数组[] 作为第二个参数传递给它，那么useEffect() 钩子只会运行一次。但是，当我运行我的代码时：

  const [grid, setGrid] = useState([]);
  console.log(grid);

  useEffect(() => {
      const grid = [];
      for (let row = 0; row < 15; row++) {
          const currentRow = [];
          for (let node = 0; node < 40; node++) {
              currentRow.push(createNode(node, row));
          }
          grid.push(currentRow);
      }
      setGrid(grid);
  }, []);

控制台记录了两个（我不是 100% 确定为什么它 console.log 两次，但唉）数组，总共有 600 个 createNode(node, row) 对象，这就是我想要的！如果我编辑代码并保存它也会显示这个。我的问题是，如果我刷新实时服务器，控制台会在第一个 console.log 上吐出一个空数组 []，然后它会记录 600 个对象的数组。

我的程序中有其他功能使用grid 数组，但我很确定这些功能会中断，因为它们传递了一个空数组。与仅在编辑器中保存相比，当我手动刷新页面时，至少我得到一个错误“无法读取未定义的属性 'x'”。

任何帮助/见解将不胜感激...

编辑： 网格渲染得很好，但只要我导入 Dijkstra 算法的逻辑

import dijkstra from "./algorithms/dijkstra";

然后我调用函数

dijkstra(grid, grid[7][10])

这只是部分实现但仍然：

function dijkstra(grid, startNode) {
    const unvisitedNodes = getNodes(grid);
    startNode.distance = 0;
    sortByDistance(unvisitedNodes);
    const closestNode = unvisitedNodes.shift();
    console.log(getNeighbors(closestNode, grid));
}

function sortByDistance(nodes) {
    nodes.sort((nodeA, nodeB) => nodeA.distance - nodeB.distance);
}

function getNodes(grid) {
    const unvisitedNodes = [];
    for (const row of grid) {
        for (const node of row) {
            unvisitedNodes.push(node);
        }
    }
    return unvisitedNodes;
}

function getNeighbors(referenceNode, grid) {
    const neighbors = [];
    const { row, col } = referenceNode;
    if (row > 0) neighbors.push(grid[row + 1][col]);
    if (row < grid.length - 1) neighbors.push(grid[row - 1][col]);
    if (col > 0) neighbors.push(grid[row][col - 1]);
    if (col < grid[0].length - 1) neighbors.push(grid[row][col + 1]);
    return neighbors;
}

export default dijkstra;

Answer 1

是的，这就是 React 的工作原理。每当您刷新浏览器时，应用程序就会呈现。在 React 中渲染

1. 首先，状态被初始化（这就是为什么您的第一个控制台日志是空数组）
2. 然后 DOM 打印
3. 然后初始化生命周期方法或挂钩
4. 然后 DOM 再次打印更新状态。（这就是为什么你在第二个日志中有对象） 当您重新加载浏览器时，整个过程会重复。

useEffect 中的[] 可防止仅在您更新状态时重新运行挂钩。