javascript - 有没有办法强制从父组件重新渲染子组件而不使用在 React 中更改其道具？

Question

问题

我有一个管理许多状态和子组件的父 (X) 组件。

在这些孩子中，我有一个动画组件（Y）（它是一个具有不同面孔并根据他所说的同步改变面孔的头像）。

目前，面部的类型是 X 中的一个状态，并作为 Y 的一个属性。这个机制是通过设置一个计时器列表来完成的，这些计时器将在需要的时间改变状态。我需要在 X 中处理面部类型的逻辑，因为我在 X 中处理头像的语音。

问题是，在说话时，头像换脸非常频繁，导致所有孩子的重新渲染过于频繁。

到目前为止我尝试过的事情

1. 我尝试的一种解决方案是将其他孩子包裹起来React.memo()以避免过度重新渲染。

   在这种情况下，我有一个问题：

   其中一个孩子 (Z) 正在包装一个按钮，该按钮使化身说话，将X 提供onClick()的函数用作道具作为函数sayText()。对于 Z，使用React.memo()是不够的。事实上，当我使用 React Profiler 时，我看到每次父级重新渲染时 Z 仍然重新渲染，因为它表示sayText()prop 发生了变化。为此，一种解决方案可能是实现自定义道具检查，React.memo()但由于sayText()依赖于其他状态（头像的外观，它的声音等......），我不能只记住它一次。

2. 我想到的替代方案是：我可以避免将面部类型作为一种状态，而只是通过赋予新的面部类型来强制从 X 重新渲染 Y。但我不知道这是否可能，而且这似乎不是一个好主意。无论如何，有人知道这是否可能吗？

或者有人可以给我建议如何更好地组织这个以避免最初的问题？

如果您需要评论，我可以提供更多详细信息。

标签： javascriptreactjsreact-hooks

Answer 1

一个想法是将 X 之外的所有非语音/化身子（和相关状态）移动到 Z（新的父组件）中。

Z 渲染 X 和所有 X 的老孩子，而 X 仅渲染与语音/化身相关的东西。