改进React Ui组件

Question

我需要关于改进UI组件的建议，该组件接收包含所有数据类型的对象，即字符串、整数、布尔、数组和对象，并显示所有数据类型。对象的示例。PS: codesandbox链接中也提供了这个对象。

const data = {
  foo1: {},
  foo9: true,
  foo3: "some random string",
  foo4: "some random string",
  created_at: {
    $date: 1637368143.618
  },
  sources: {
    foo1: {
      first_date: {
        $date: 1637368143.618
      }
    }
  },
  download: {
    status: "pending"
  },
  foo8: "some random string",
  foo5: "some random string",
  foo7: ["sms"],
  foo10: "some random string",
  foo11: {
    bar5: 0,
    bar3: null,
    bar1: null,
    bar2: 0
  },
  foo28: ["some random string", "some random string2"],
  foo19: "some random string"
};

目前，我循环遍历对象并在卡中显示数据。

Object.entries(objSorted).map(([key, value])

但首先，对象按照字符串、整数或布尔值、数组和对象的顺序排序到信息中。

这是codesandbox的链接。here

PS:这更多的是一个建议，而不是一个问题，我对代码没有任何问题。我只想知道当前显示此数据的方式是否良好且用户友好(我认为不是，这就是我问的原因)。如果你认为有更好的方法，你可以注释或编辑codesandbox，或者创建一个新的codesandbox。

Answer 1

你的直觉是正确的！我们可以通过以类似于您提到的方式分解所有内容，使这一点更容易理解。我们真正想要的是更好的关注点分离。所有这些细节都挥手而去，但概念将是你随身携带的。

1. 您有数据。
2. 对数据进行排序。
3. 遍历步骤2的输出并呈现cards.
4. profit?

第1/2步。您有数据。为什么不在渲染之前消化一下呢？有很多方法可以做到这一点，但为了可读性，让我们创建一个钩子，并对我们的下游消费者保持良知。我们可以使我们的ObjectExtract组件变得更简单，如果它有格式良好的数据...我们可以记住结果，这样我们的摘要数据就会被缓存，因此永远不会重新计算渲染。

const useCardData = (data) => {
  return useMemo(() => {
    const entries = Object.entries(data)
        .map(([key, value]) => {
          let type = "unknown";

          if (Array.isArray(key)) {
              type = "array";
          } else if (typeof value === "boolean") {
              type = "boolean";
          } else if { ... };

          return { type, value, key, priority: getTypeSortId(type) };
        })
        .sort((x, y) => x.priority - y.priority)

    return entries;
  }, [data]);
};

我们尽可能多地消化我们的数据。稍后需要使用key，因为使用索引作为键几乎不是您想要的，因为当顺序改变时，react使用键来跟踪应该如何移位行。来自数组的数字索引并不能真正描述记录的唯一性。想象一下对记录进行排序，索引1在排序前后的含义可能完全不同，您的数据可能会正确显示，也可能不会正确显示。我们使用对象属性名作为我们的唯一键，因为对象在不允许重复键方面做得很好。

步骤3.让我们使用钩子并呈现数据。

const CardRenderer = ({ data }) => {
  const cards = useCardData(data);

  return (
    <>
      {cards.map((thing) => {
        switch (thing.type) {
          case "boolean":
            return <BooleanCard key={thing.key} data={thing} />;
          case "string":
            return <StringCard key={thing.key} data={thing} />;
          case "...":
            return ...;
        }
      }}
    </> 
  )
};

因为我们的数据是格式良好的，所以我们可以通过一个开关简单地循环它。不是在一个组件中定义所有的情况及其结果，请注意我们是如何创建较小的卡片组件来处理每个特定情况的。关注点分离。布尔卡关心的是布尔值是什么样子等等。这使得它非常容易测试，因为您可以单独测试每个卡，然后测试我们的CardRenderer的输出，以确保其输出是合理的。

第四步:利润。我们把一切都交给了components。每件事只关心一个特定的责任，这使得将事情粘合在一起变得很容易。这使得它可以组合。我们可以自己测试每一块，并确保它在做正确的事情。我们可以像这样做一些非常复杂的事情，同时隐藏每个个体的复杂性。

我所描述的是SOLID。链接中的示例是用PHP编写的，但我想您会明白要点的。我们可以而且应该在react中使用相同的模式来构建真正酷的东西，同时管理越来越酷的东西的复杂性。