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

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} />

我的问题是，这是不好的做法吗？一切正常。该应用程序类似于约会应用程序 UI，其中第一张卡片或数组中的元素弹出，我们会看到下一张卡片。您还可以通过什么方式传入大型数组来使用和呈现组件中的元素？

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

Answer 1

在 React 状态下拥有大量数据非常好。您可以在那里存储的内容并没有真正的限制，并且 React 状态本身不会对其可以存储的大小施加任何类型的限制。

大型数据集的问题出现在呈现 此类数据时。例如，如果您有一个需要呈现数千 行的表，它会降低浏览器的速度。虽然我们谈论的是数千个条目，但数百个根本不成问题。

如果您发现自己必须渲染 数以千计的数据点，您可以使用有助于解决此问题的组件/库，例如 React Virtualized ，它只会呈现所需的元素，而不是所有元素。

如您所见，问题不在于您存储的内容，而在于您呈现的内容。我的建议是，在您注意到性能问题之前不要担心您正在渲染的内容，一旦您达到该点，您就需要开始优化。

除非您确定会遇到性能问题，否则从一开始就进行优化会让您浪费时间，而这些时间本该花在其他地方。