子组件在React + Flux架构中未正确更新

Question

我想我没有按照我的意愿使用它。

我正试图尽可能地简化事情，所以我将简要描述问题，我找到的解决方案以及我不喜欢的解决方案。

问题 我的应用程序中有一些流程。想象一下多步练习，每一步都有一张牌列表。从一个步骤到另一个步骤的卡片和其他数据是不同的，因此基本上每个步骤我都有相同的组件，但具有不同的数据。每个步骤都会在cardsObject中获得getDefaultProps。在getInitialState中，我将其转换为数组以更轻松地呈现它。

当我添加新卡时，Dispatcher会将新数据发送到Store。它会发出更改，View更新，将新卡传递为props，但不会再次进入状态，所以组件使用相同的卡重新渲染。

附加图表以便更好地理解（左侧和右侧列是相同的组件组。为了更好地理解流程，我将它们分开放置）

我找到的解决方案

1。首先想到的是组件无法正常更新。所以我为它设置了key，每次都会生成唯一键。这意味着当传递4张卡时，它会再次进入getDefaultProps和getInitialState并重新渲染组件。

大的缺点是它重新呈现所有组件（来自它的卡片列表，它具有的不同文本）。我希望它只是在内存中重新呈现它，但它也重新呈现DOM。所以它不是高效的。 我基本上删除所有内容并在每次更新时再次创建。

2. 另一种解决方案是每次为每个步骤生成相同的密钥（步骤1获取密钥1，依此类推）。为了获得新卡，我不得不摆脱getInitialState并使用直接来自render的卡片在props中工作。我发现，这是这种方法的缺点。这意味着我无法处理来自州的事情，因为只有道具才会改变。

所以，我需要一些指导。你如何找到2个解决方案？我可以在收到新道具时以某种方式更新状态吗？ ComponentWillUpdate被触发，我有新的道具。我怎样才能再次将它们注入州内？我在setState中尝试了componentWillUpdate，但我得到了一个反应迟钝的脚本。我想我需要一个更好的解决方案。

提前致谢。我没有发布任何代码，因为它只是直截了当，没什么特别的。

Answer 1

是的，你肯定想要使用密钥，我认为你的第二个解决方案就是它的工作方式。

纯粹从道具渲染实际上是你想要的尽可能多。 Converting props to state is especially to be avoided。如果你可以从道具中派生它，你应该只在渲染函数中派生道具。

在极少数情况下，您需要执行一些不想在每个渲染过程中重复的繁重计算。根据我的经验，很容易预先优化这一点：现在JavaScript非常快。然而，有些情况下它可能是一个瓶颈。在这些情况下，您可以使用componentWillReceiveProps将某些道具转换为状态，如果它们已更改。请注意componentWillReceiveProps does not indicate the props have actually changed values，只是它们已由父渲染传递。由你来检查道具是否已经改变并在那时进行繁重的计算setState。另请注意，在初始渲染之前componentWillReceiveProps 未被调用，因此您通常需要componentWillMount和componentWillReceiveProps的某种组合，这两种组合都会调用计算函数来计算州。同样，如果只需从道具中获取所有数据就可以避免所有这些，那么请改为使用。