Question

我有一个包含“配置文件”的数组，如下所示。这存储在导出的变量中，然后我想在我的组件中呈现它们。

const people = [
  {
    name : "Chuck",
    image : "./chuck.png",
    skill : "Bowling"
  },
  {
    name : "Arno",
    image : './arno.png',
    skill : "backflips"
  }
]
export default people;

我导入变量（请注意，它包含数百个数据点），并且在我的组件构造函数中，我使用以下内容，

constructor(props) {
    super(props)
    this.state = { data : people }

为了渲染这些，我然后使用map将它们映射到卡组件中

render() {
    let cards = this.state.data.map(function(elem, index) {
      return (
        <Card
          name = {elem.name}
          image = {elem.image}
          skills = {elem.skill}
          key = {elem.name}
          zIndex = {1000-`${index}`}
          />
      )
    })
return (
        <Card {pass in props (name, image, skills) to child Card component} />

我的问题是，这是不好的做法吗？一切正常。该应用程序类似于约会应用程序用户界面，其中弹出第一张卡片或数组中的元素，并向我们显示下一张卡片。您还将如何传递大型数组以使用和渲染组件中的元素？

我希望清楚我在这里做什么。谢谢

Answer 1

在React状态下拥有大数据是完全可以的。您可以在那里存储的内容实际上没有限制，而且React状态本身对其可以存储的大小没有任何限制。

大数据集的问题随渲染数据一起出现。例如，如果您有一个需要渲染数千行的表，它将降低浏览器的速度。不过，我们谈论的是成千上万的条目，根本不成问题的是数百。

如果发现自己必须渲染数千个数据点，则可以使用有助于实现这一目的的组件/库，例如React Virtualized，它只会渲染所需的元素，而不是全部。

如您所见，问题不是您在商店中存储的内容，而是您在中呈现的内容。我的建议是在发现性能问题之前不要担心要渲染的内容，一旦达到这一点，就需要开始进行优化。

除非您确定会遇到性能问题，否则从一开始进行优化可能会使您失去更多在其他地方花费的时间。

Answer 2

对象内容的大小与将其存储在状态无关紧要。该对象不是复制的，而是被引用的。

但是，如果people不是由组件管理的，那么它就不是组件状态的一部分，因此state不在应有的位置。该组件应仅关闭该数据的import，或使用表示该数据的context，或以道具等形式接收它。

Answer 3

要专门回答您的问题，以状态存储对象数组是React的方式。

React的文档没有对象数组，但是列表由状态为https://reactjs.org/docs/lists-and-keys.html

的数组组成

请注意，这完全取决于用例以及您的应用如何使用这种状态：

如果数据永不更改，则最好将其置于状态之外的单独变量中。
如果更改并且数据不会影响性能，则可以将其保持在状态。
如果您开始发现最好进行一些优化，则可以研究许多范例，例如分页，缓存，从列表中删除未显示的项等等。

Answer 4

如果以后打算使用setState修改数据，那么这不是一个好主意。因为状态将始终保留人员变量中的值。否则，您可以直接使用人员中的值来渲染组件中的元素

可以将大变量传递到React状态吗？

4 个答案: