将新道具传递给从地图创建的组件答案

【问题标题】：Pass New Props To Components Created from a map将新道具传递给从地图创建的组件
【发布时间】：2018-11-05 13:38:39
【问题描述】：

我不确定如何更新通过数组映射呈现的组件的道具。

我有一个名为 names 的数组，我将其映射到为每个名称呈现一个 Panel 组件。每个面板都包含一个图表组件，用于创建显示一些数据的图表。每个图表的数据作为称为“数据”的道具传递给每个图表组件。每个图表的数据存储在一个名为 chartData 的数组中。这是一个例子：

{
  names.map((name, index) => {
    return (
      <Panel key={index}>
        <h1>{name}</h1>
        <Chart data={chartData[index]} />
      </Panel>
    );
  });
}

我不知道该怎么做是更新每个图表组件的数据，而无需再次映射名称数组并重新渲染所有内容。一旦数据更新，我希望以某种方式将新数据传递给每个现有的图表组件。有任何想法吗？

【问题讨论】：

update the data for each Chart component without mapping over the names array - 我不确定你到底在问什么。
一旦数据发生变化，我想更新图表，但我不想用新数据制作新图表；我希望旧图表显示新数据。不确定这是否有意义。
如果您将 PureComponent 用于您的 Panel 类，重新渲染应该相当有效。
嗨，如果你在你的项目中使用Redux，你可以使用reselect库，它将记住你的商店：github.com/reduxjs/reselect

标签： javascript reactjs

【解决方案1】：

React 使用虚拟 DOM 的概念来“智能地”重新渲染它需要的东西，所以如果你担心性能和不必要的重新渲染会导致对更改的 names 数组做出反应并重新渲染一切，不要。

我可以看到你提供了一个密钥，所以你只需要它来决定什么重新渲染，什么不重新渲染。

tl;dr : 别担心，反应很聪明 :)

【讨论】：

问题与性能无关，而是我用来呈现图表的库要求将新数据传递给现有图表，而不是为新数据创建一个全新的图表.我知道 react 会有效地更新 DOM，但我的图表库需要更新数据。
该库是从 DOM 获取数据而不是通过函数的参数获取数据吗？