Reactjs 每次使用挂钩在样式化组件中更改props.children时都要制作动画

我想在每次修改props.children时触发名为Counter的hooks组件中的动画，该组件带有样式化组件v4，但我不知道如何实现我的代码

这是我的密码

import React, { useState } from 'react';
import styled, { css, keyframes } from 'styled-components';

const highlight = keyframes`
  25% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1.0);
  }
`;

const highlightAnimation = css`
  animation: ${highlight} 1s ease;
`;

const Circle = styled.div`
  // ...other attributes
  ${highlightAnimation}
`;

const Counter = ({ children, color, status }) => {
  return (
    <Circle color={color} status={status}>
      {children}
    </Circle>
  );
};

export default Counter;

import React，{useState}来自“React”；
从“样式化组件”导入样式化，{css，关键帧}；
常量高光=关键帧`
25% {
转换：比例（1.3）；
}
100% {
变换：比例（1.0）；
}
`;
const highlightAnimation=css`
动画：${highlight}1s轻松；
`;
const Circle=styled.div`
//…其他属性
${highlightAnimation}
`;
常量计数器=（{子项，颜色，状态}）=>{
返回(
{儿童}
);
};
导出默认计数器；

第一次渲染时仅设置一次动画

我认为这是virtualDOM中类似渲染的扩散算法的问题

---

只有子对象发生更改时，它不会重新渲染。如果要触发重新渲染，则只需更改文本而不重新渲染，因此将应用新动画，您只需使用希望组件在更改时重新渲染的值向组件添加一个

关键点

 <Circle color={color} status={status} key={`${color}-${status}`}>



看看React在和解方面是如何工作的

我看不到您在任何组件中使用状态（您正在导入状态，但从未使用过状态）。您可以将useState与useEffect结合使用。当某些内容发生更改时，将调用useffect:
useffect（（）=>setsomestatebecausemethingchanged（），[valueChanged]）
@HMR感谢您的回复。你说得对，我从来没用过useState。使用useEffect，我可以捕捉每次更改子对象的时刻，但我不知道如何触发该动画，只需在返回之前在计数器组件中添加此-
useEffect（（）=>{console.log（“children changed”）}，[children]）
.wow。你说得对。我已经知道对账，但我没有想到使用
键。谢谢