前言

在本文中，我们将探索 React 中递归组件的细节及其在实际应用程序中的用法。我们将查看 React 中递归和非递归组件的示例，并评估它们的模块化、可读性和可维护性。之后，我们将构建一个递归组件，一个类似于 VS Code 的嵌套文件浏览器。

React 中的递归组件是什么？

递归：在自身内部重复调用函数，直到满足基本条件（基本情况）。每次递归函数调用自身时，它都会接受一个新参数。例如，下面的 factorial 函数通过使用不同的参数重复调用自身来工作，直到满足基本条件：

function factorial(num) {
    if (num <= 1) {  
        return 1;
    }
    return num * factorial(num - 1); 
}
console.log(factorial(6)); // 720 

当 React 组件使用不同的 props 在自身内部重复渲染直到满足基本条件时，它被称为递归组件。

递归组件是独一无二的，因为它可以调用自身并呈现深层嵌套的数据。这些组件不仅限于简单地在 UI 上渲染父数据；他们还呈现 children 数据。在这些组件中，可以通过传递 props 来设置 children。

React 中递归组件的简单示例：

import React from "react";

const RecursiveComponent = ({children}) => {
  return (
    <div>
      {children.length > 0 && <RecursiveComponent children={children} />}
    </div>
  );
};

export default RecursiveComponent;

如果你对这个概念在现实世界中的应用感到好奇，你可以在  Reddit （VS Code 的文件浏览器）中看到它们作为嵌套的实际应用。

接下来我们将探索它们的用途并构建一个的示例。

递归与 React 中的循环有何不同？

循环和递归之间的关键区别：递归包括调用一个调用自身的函数，而循环需要连续调用相同的代码，直到满足特定条件。

对于循环，我们必须先定义我们的控制变量，然后才能在循环的任何迭代中使用它。

例如，当我们创建 for loop 来循环遍历数组时，我们必须声明一个计数器变量 let i=0 来跟踪迭代次数。这允许我们在遍历数组时使用计数器变量。否则，我们需要用到的时候就用不到了，就需要 increment 或者 decrement 这些控制变量来避免死循环。

而递归不必声明任何变量来执行递归操作。这是因为递归操作不依赖于变量，只需要一个停止调用函数的基本条件。

总结：

• 可返回性：循环，不能返回任何东西。但是，递归时，我们可以从函数返回一个值
• 可读性和模块化：代码通过递归变得更具可读性和模块化。使用循环会使代码更长

为什么、何时在 React 中使用递归组件

最常见的情况是我们的数据嵌套了好几层。

假设我们有一个对象数组，每个对象都有一个 children 键对应另一个对象数组。该数组的每个对象部分都有一个 children 键对应于另一个对象数组。同样，这些对象可以类似地包含更多子数组。

下所示：

export const data = [
  {
    isFolder: true,
    name: "public",
    children: [
      {
        isFolder: false,
        name: "index.html",
      },
    ],
  },
  {
    isFolder: true,
    name: "src",
    children: [
      {
        isFolder: true,
        name: "components",
        children: [
          {
            isFolder: true,
            name: "home",
            children: [
              {
                isFolder: false,
                name: "Home.js",
              },
            ],
          },
        ],
      },
      {
        isFolder: false,
        name: "App.js",
      },
    ],
  },
];

上面的数据有很多嵌套的子数组。这些嵌套项可以更深，我们以四层深为例。

在这种情况下使用循环 需要编写很多嵌套循环来遍历每一层数据，使的代码更大且更难阅读。

而且，如果我们不确定我们的数据有多深，使用循环遍历所有嵌套数据将是很难实现的。

所以，在这种情况下，最好使用递归。

使用标准 React 组件构建嵌套文件浏览器

未完待续

谢谢！

点击查看活动详情