使用 React：关于解构组件的问题

Question

所以，我正在进行一些 React 学习，目前我只是在做一些小代码。我正在写两个文件。第一个是我的数据在变量中的位置。我使用基本的地图方法来循环遍历对象数组并按原样显示信息。非常简单并且非常有道理。 我的 gitHub 存储库中的代码的屏幕截图。

但是，在那之后我想尝试练习使用道具并解构我的对象数组。因此，我创建了一个标记为“电影”的新文件组件，并将其传递给我的“电影”地图方法。使用道具，我通过电影名称和发行年份进行渲染。我知道使用此方法会将每个列表项变成它自己的组件，但我不明白为什么这很有用？有人可以给我一些在实际情况中使用的示例，或者向我指出一些使用它更好的存储库，以便我可以更好地理解解构对象数组的这种用法吗？谢谢！

我认为对我来说最令人困惑的部分是我仍然在 App.jsx 中调用 Movies 来渲染数据，所以感觉我可能根本没有 Movie 组件并将它们保留在一个组件中。

电影文件 使用道具将信息传递到电影文件后的电影文件。

代码按预期工作。只是好奇它为何起作用背后的逻辑。

Answer 1

所以，它现在看起来可能不是很有用，但假设电影组件有一个按钮。单击按钮时，仅在 Movie 组件内部发生一些操作。所以您不希望重新渲染整个应用程序。这就是您创建

<Movie/>

组件的原因。

另一个主要用例是当

<Movie/>

组件有一些需要重用的样式时。现在您可以创建常见的 CSS 类，但是如果您还需要其中的一些功能怎么办？您可以将其视为任何应用程序的所有

Modals

都是一个组件。这就是为什么你需要在 React 应用程序中使用组件。

对于您的情况，也许直接使用

<li>

更明智，但一旦您的需求变得复杂，就不再明智了。