动态创建新组件，而无需使用数组或setstate

Question

这可能非常简单，但是对于我一生来说，我不知道该如何实现。

我有一个通过websockets运作的通知系统，每次发送新通知时，我都会将其添加到处于状态的数组中并重新映射以包含该通知。每个通知都有自己的超时时间，因此我可以通过编程方式将其删除...但是...每个通知还具有动画徽标，基本上在每次出现新通知时都会重置该徽标。发生这种情况是由于每次都映射了数组，因此动画本质上是一个新的通知，因此动画又重新开始了...因此，我最终得到了几个通知，它们的动画均同步。

最终我希望能够接收新的通知，将其呈现，而不是触摸设置状态...这可能吗？

Answer 1

我要说的是，这取决于您制作动画的精确程度。纯粹是CSS动画还是JS驱动的动画？通常，这种行为意味着每次更新都会重新安装组件。可以通过提供一致的key属性（例如标识通知的唯一id）来更改。

Answer 2

如果确保现有通知具有与以前相同的键，则在将新通知添加到状态中的数组时，不应重新呈现它们。

这里是codesandbox，您可以在其中生成新通知，而无需触发现有通知的重新呈现。