React + Flux 架构中的子组件未正确更新
Sub-component not updating properly in React + Flux architecture
我想我没有按预期使用它。
我正在努力尽可能地简化事情，所以我将简要描述问题、我找到的解决方案以及我不喜欢它们的地方。
问题
我的应用程序中有一些流程。想象一个多步骤练习，每个步骤都有一张卡片列表。从一步到另一步的卡片和其他数据是不同的，所以基本上在每一步我都有 相同的组件 ，但数据不同。每一步在 getDefaultProps 中得到一个 cardsObject。在 getInitialState 中，我将其转换为数组以更轻松地呈现它。
当我添加新卡时，Dispatcher 将新数据发送到 Store。它发出变化，View 更新，它 将新卡片 作为 props 传递，但它们 不会再次进入状态，因此组件使用相同的卡片重新呈现。
附上图表便于理解（左右两列是同一组组件，我分开放是为了更好地理解流程）
我找到的解决方案
1.首先想到的是组件没有正确更新。所以我为它设置了一个key，每次生成一个唯一键。这意味着当传递 4 张卡片时，它会再次进入 getDefaultProps 和 getInitialState 并正确地重新呈现组件。
最大的缺点 是它重新呈现所有组件（其中的卡片列表，它具有的不同文本）。我希望它只是在内存中重新呈现它，但它也重新呈现 DOM。所以它不是高性能的。 我基本上是在每次更新时删除所有内容并重新创建。
2. 另一种解决方案是每次为每个步骤生成相同的密钥（步骤 1 获取密钥 1，依此类推）。为了获得新卡片，我不得不摆脱 getInitialState 并直接使用 props 中的卡片在 render 中工作。我发现，这是这种方法的缺点。这意味着我不能使用来自状态的东西，因为只有道具会改变。
所以，我需要一些指导。你如何找到2个解决方案？我可以在收到新道具时以某种方式更新状态吗？ ComponentWillUpdate 被触发，我在那里有新道具。我怎样才能再次将它们注入状态？我已经在 componentWillUpdate 中尝试了 setState 并且我得到了一个无响应的脚本。我想我需要一个更好的解决方案。
提前致谢。我没有 post 任何代码，因为它很简单，没什么特别的。
是的，您肯定想使用密钥，我认为您的第二个解决方案应该是这样。
纯粹从props渲染，其实尽可能的就是你想要的。 Converting props to state is especially to be avoided。如果你可以从道具派生它，你应该在你的渲染函数中派生它的道具。
在极少数情况下，您需要执行一些您不想在每个渲染过程中重复的繁重计算。根据我的经验，过早地优化它很容易：JavaScript 这些天非常快。但是，在某些情况下它可能是一个瓶颈。在这些情况下，您可以使用 componentWillReceiveProps 将一些 props 转换为状态 if they changed。请注意 componentWillReceiveProps does not indicate the props have actually changed values，只是它们已被父渲染传递。由你来检查道具是否已经改变并在那个时候进行大量计算 setState。另请注意 componentWillReceiveProps 是 not 在初始渲染之前调用，因此您通常需要一些 componentWillMount 和 componentWillReceiveProps 的组合来调用函数计算状态。同样，如果所有这些都可以通过从 props 中导出所有数据来避免，那就用它来代替。
我想我没有按预期使用它。
我正在努力尽可能地简化事情，所以我将简要描述问题、我找到的解决方案以及我不喜欢它们的地方。
问题
我的应用程序中有一些流程。想象一个多步骤练习，每个步骤都有一张卡片列表。从一步到另一步的卡片和其他数据是不同的，所以基本上在每一步我都有 相同的组件 ，但数据不同。每一步在 getDefaultProps 中得到一个 cardsObject。在 getInitialState 中，我将其转换为数组以更轻松地呈现它。
当我添加新卡时，Dispatcher 将新数据发送到 Store。它发出变化，View 更新，它 将新卡片 作为 props 传递，但它们 不会再次进入状态，因此组件使用相同的卡片重新呈现。
附上图表便于理解（左右两列是同一组组件，我分开放是为了更好地理解流程）
我找到的解决方案
1.首先想到的是组件没有正确更新。所以我为它设置了一个key，每次生成一个唯一键。这意味着当传递 4 张卡片时，它会再次进入 getDefaultProps 和 getInitialState 并正确地重新呈现组件。
最大的缺点 是它重新呈现所有组件（其中的卡片列表，它具有的不同文本）。我希望它只是在内存中重新呈现它，但它也重新呈现 DOM。所以它不是高性能的。 我基本上是在每次更新时删除所有内容并重新创建。
2. 另一种解决方案是每次为每个步骤生成相同的密钥（步骤 1 获取密钥 1，依此类推）。为了获得新卡片，我不得不摆脱 getInitialState 并直接使用 props 中的卡片在 render 中工作。我发现，这是这种方法的缺点。这意味着我不能使用来自状态的东西，因为只有道具会改变。
所以，我需要一些指导。你如何找到2个解决方案？我可以在收到新道具时以某种方式更新状态吗？ ComponentWillUpdate 被触发，我在那里有新道具。我怎样才能再次将它们注入状态？我已经在 componentWillUpdate 中尝试了 setState 并且我得到了一个无响应的脚本。我想我需要一个更好的解决方案。
提前致谢。我没有 post 任何代码，因为它很简单，没什么特别的。
是的，您肯定想使用密钥，我认为您的第二个解决方案应该是这样。
纯粹从props渲染，其实尽可能的就是你想要的。 Converting props to state is especially to be avoided。如果你可以从道具派生它，你应该在你的渲染函数中派生它的道具。
在极少数情况下，您需要执行一些您不想在每个渲染过程中重复的繁重计算。根据我的经验，过早地优化它很容易：JavaScript 这些天非常快。但是，在某些情况下它可能是一个瓶颈。在这些情况下，您可以使用 componentWillReceiveProps 将一些 props 转换为状态 if they changed。请注意 componentWillReceiveProps does not indicate the props have actually changed values，只是它们已被父渲染传递。由你来检查道具是否已经改变并在那个时候进行大量计算 setState。另请注意 componentWillReceiveProps 是 not 在初始渲染之前调用，因此您通常需要一些 componentWillMount 和 componentWillReceiveProps 的组合来调用函数计算状态。同样，如果所有这些都可以通过从 props 中导出所有数据来避免，那就用它来代替。