Question

我正在构建一个组件，该组件在每次本地和redux状态更新时呈现动画。单击按钮会更新本地状态，它还会向远程服务器发出ajax请求，以更新用户单击按钮。我每次点击都会更新本地状态，例如：

 const [selfAnimations, setAnimations] = useState<AnimationRenders>(initialAnimationState);
const onButtonClickCallback = () => {
    makeRemoteAjaxCall();
    selfAnimations.localEventsCount += 1;
    selfAnimations.animationsToRender.push(Date.now);
    setAnimations(selfAnimations);
};

我更新来自远程服务器的数据，如下所示：

    useEffect(() => {
        if (animationDataCount && animationDataCount > 0) {
            const {
                updatedLocalEventsCount,
                updatedAnimations,
            } = filterDedupedLocalEvents(selfAnimations, animationDataCount);
            setAnimations({
                localEventsCount: updatedLocalEventsCount,
                animationsToRender: updatedAnimations,
            });
        }
    }, [animationDataCount]);

我使用创建的组件渲染div：

<div classNames={...}>
    <AnimationContainer numberOfAnimations={selfAnimations.animationsToRender.length} />
</div>
<div className={...}>
   <MyButton ... />
</div>

在客户端，将定期接收数据。我的AnimationContainer组件可以渲染任意数量的接收到的动画。但是，每次用户单击按钮或客户端收到远程数据时，它都会更新状态并删除以前的动画。在线查看时，我可以使用CSS延迟重新渲染，但是我需要的行为是在状态更新时附加到现有动画上。有什么机制可以用于我的行为吗？

Answer 1

我误解了反应如何渲染。 React不一定会创建新的子组件，也不会在道具/状态更新上卸载旧的组件。就我而言，不是存储需要渲染的内容的计数，而是需要存储需要渲染的内容的不同键，因为即使AnimationContainer组件从道具接收更新，如果它仅接收到计数，那么它可能不会触发因为数量可以相同，所以重新投放。我通过将localEvents的道具实现为timestamps: number[]的数组来解决了这个问题。通过将时间戳记传递给AnimationContainer并重构AnimationContainer以检查道具更新并将其存储在渲染中间以及要渲染的动画队列中的动画状态中，我能够创建一个组件，该组件可以接收并基于事件连续渲染动画。 / p>

React：在本地和Redux状态更新上附加组件动画

1 个答案: