useSpring在props变更时不触发动画，与文档描述不符求排查

嘿，我来帮你排查这个问题！你的计数器组件props变更时useSpring没触发动画，核心原因是当前的useSpring配置完全没监听value props的变化——它只会在组件第一次挂载的时候，执行那一次从opacity:0到opacity:1的动画，之后value更新时，useSpring根本不知道要重新跑动画。

怎么修复？ #

这里有几种实用的解决方式，你可以根据自己的需求选：

1. 给useSpring加上props依赖 #

把value作为useSpring的依赖项，让它感知到props的变化，每次value更新时重新触发动画：

import React, { useState } from "react";
import { animated, useSpring } from "react-spring";

const Counter = ({ value }) => {
  // 用deps指定依赖，每次value变就重新执行动画
  const anim = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    deps: [value]
  });
  return <animated.h1 style={anim}>{value}</animated.h1>;
};

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Counter value={count} />
      <button onClick={() => setCount(count + 1)}>increment</button>
    </>
  );
}

2. 用reset属性强制重启动画 #

如果你希望每次value变化时，都完全重置并重新执行初始动画，可以加上reset: true：

const Counter = ({ value }) => {
  const anim = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    reset: true, // 每次依赖变化就重置动画
    deps: [value]
  });
  return <animated.h1 style={anim}>{value}</animated.h1>;
};

3. 让动画和数值本身关联（进阶玩法） #

要是你想让计数器的数字也有过渡动画（而不只是透明度），可以把value直接绑定到动画属性上：

const Counter = ({ value }) => {
  const anim = useSpring({
    number: value,
    opacity: 1,
    from: { number: 0, opacity: 0 },
    deps: [value]
  });
  // 用interpolate处理数字的平滑过渡
  return <animated.h1 style={{ opacity: anim.opacity }}>{anim.number.interpolate(n => Math.round(n))}</animated.h1>;
};

为啥之前的代码不行？ #

原来的useSpring配置没有设置任何依赖项，它只会在组件挂载时初始化一次动画逻辑。当value更新触发组件重渲染时，useSpring因为没监听value的变化，所以不会重新计算动画状态，自然就不会有新的动画效果啦。

内容的提问来源于stack exchange，提问作者msalla